使用JavaScript显示多个CSS弹出窗口

Question

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?

Answer 1

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.

Answer 2

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.