Отображать несколько всплывающих окон CSS с помощью JavaScript

Question

Я не знаком с 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>

Я сомневаюсь, как открыть несколько всплывающих окон одновременно, используя только один <span id='term1'></span>. Каждое всплывающее окно должно содержать различное содержимое, полученное из базы данных. Как открыть несколько всплывающих окон CSS?

Answer 1

Если вы хотите, чтобы одновременно открывались несколько всплывающих окон, вам понадобится несколько элементов для отображения данных. Самый простой способ сделать это - использовать один из многих плагинов jQuery, которые уже написаны для этого. - я никогда не использовал ни одного предложения, но не могу дать никаких предложений, но достаточно быстрого поиска в Google.

Однако, если вы действительно хотите реализовать это самостоятельно, вам нужно будет создать элементы по требованию с помощью jQuery, загрузить соответствующие данные (определяемые тем, по какой ссылке щелкнули) во вновь созданный элемент, а затем добавить его. в DOM и сделайте это видимым. Затем, когда пользователь решит закрыть всплывающее окно, просто снова удалите этот элемент.

Answer 2

Надеюсь, это поможет вам, вот как я это сделал:

http://jsfiddle.net/F5VCJ/

РЕДАКТИРОВАТЬ: я не реализовал никакой функциональности, чтобы переместить диалог, хотя в данный момент вам придется реализовать это, но сейчас вы можете просто дать разные классы диалогам для позиционирования их, или напишите некоторый код, чтобы они появлялись рядом с данным элементом.