使用 JavaScript 显示多个 CSS 弹出窗口
我不熟悉 JavaScript。在我的项目中，我想制作一个 CSS 弹出窗口。我使用 CSS 和 JavaScript 创建了一个弹出窗口。
JavaScript:
function ShowPop(id)
{
document.getElementById(id).style.visibility = "visible";
}
CSS:
.popup
{
position: absolute;
left:400px;
top:100px; width:230px;
border-style:solid;
padding: 5px;
z-index:2;
visibility:hidden;
}
HTML：
<a href='javascript:void(0);' onclick='ShowPop("term1")>a</a>
<span id='term1'></span>
我的疑问是如何仅使用一个 一次打开多个弹出窗口。每个弹出窗口必须包含从数据库检索的不同内容。如何打开多个 CSS 弹出窗口？
I not familiar with JavaScript. In my project I want to make a CSS popup. I created a pop up using CSS and JavaScript.
JavaScript:
function ShowPop(id)
{
document.getElementById(id).style.visibility = "visible";
}
CSS:
.popup
{
position: absolute;
left:400px;
top:100px; width:230px;
border-style:solid;
padding: 5px;
z-index:2;
visibility:hidden;
}
HTML:
<a href='javascript:void(0);' onclick='ShowPop("term1")>a</a>
<span id='term1'></span>
My doubt is how to open multiple pop ups at time, with using only one <span id='term1'></span>. Each pop up has to contain different content retrieved from a database. How to open multiple CSS popups?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
希望这对您有帮助，我就是这样做的：
http://jsfiddle.net/F5VCJ/
编辑：虽然我还没有实现任何移动对话框的功能，所以目前您是必须实现该功能的人，但现在您可以简单地为对话框提供不同的类来定位它们，或者编写一些代码让它们出现位于给定元素旁边。
Hope this helps you, it's how I've done it:
http://jsfiddle.net/F5VCJ/
EDIT: I haven't implemented any functionality to move the dialog around though, so at the moment you're the one who'll have to implement that, but for now you could simply give different classes to the dialogs to position them, or write some code to make them appear next to a given element.
如果您希望在任意时间打开多个弹出窗口，则需要多个元素来显示数据。最简单的方法是使用已编写的众多 jQuery 插件之一来执行此操作 - 以前从未使用过我自己用过一个，我无法提供任何建议，但快速谷歌搜索应该足够了。
但是，如果您确实想自己实现此功能，则需要使用 jQuery 创建所需的元素，将相关数据（由单击的链接确定）加载到新创建的元素中，然后将其添加到 DOM并使其可见。然后，当用户选择关闭弹出窗口时，只需再次删除该元素即可。
If you want multiple popups opened at any one time, you'll need multiple elements to display the data in. The easiest way to do that would be to use one of the many jQuery plugins that have already been written to do this - having never used one myself, I can't provide any suggestions, but a quick Google search should be sufficient.
If, however, you really wanted to implement this yourself, you'd need to create the elements on demand using jQuery, load the relevant data (determined by which link was clicked on) into the newly created element, then add it to the DOM and make it visible. Then, when the user chooses to close the popup, simply remove that element again.