多个弹出窗口

Question

我有一个JavaScript来打开一个DIV弹出。 但是现在我想从不同的DIVS打开几个不同的弹出窗口，我无法让它正常工作。

我用下面的JavaScript：

<script> 
window.onload = function() 
{ 
    var show = document.getElementById('show-div'); 
    var hide = document.getElementById('hide-div'); 
    var popup = document.getElementById('popup-div'); 

    show.onclick = function(e) 
    { 
     popup.style.visibility = 'visible'; 
     return false; 
    } 

    hide.onclick = function(e) 
    { 
     popup.style.visibility = 'hidden'; 
     return false; 
    } 
} 
</script> 

和股利我用的是跟随着代码：

<a id="show-div" href="#">link</a> 
<div id="popup-div"> 
<div id="popup-header"> 
<div id="popup-title">...Popup title...</div> 
<a id="hide-div" href="#">X</a></div> 
<div id="popup-body"> 
<p>This is the content of the div....</p> 
</div> 
</div> 

本工程为1个链接，但即使当我使用不同的DIV ID（和相关的var元素，如“var popup1 = document.getElementById（'popup-div1'）;”和popup1 onclick事件）我无法正常工作。 如何使它与其所有带有内容的DIV的多个链接一起工作。

（因为我不能回答我的问题，这是我如何固定它） 我做它用下面的代码工作：

<script> 
window.onload = function() 
{ 
    var show = document.getElementById('show-div'); 
    var show2 = document.getElementById('show-div2'); 
    var hide = document.getElementById('hide-div'); 
    var hide2 = document.getElementById('hide-div2'); 
    var popup = document.getElementById('popup-div'); 
    var popup2 = document.getElementById('popup-div2'); 

    show.onclick = function(e) 
    { 
     popup.style.visibility = 'visible'; 
     return false; 
    } 

    show2.onclick = function(e) 
    { 
     popup2.style.visibility = 'visible'; 
     return false; 
    } 

    hide.onclick = function(e) 
    { 
     popup.style.visibility = 'hidden'; 
     return false; 
    } 
    hide2.onclick = function(e) 
    { 
     popup2.style.visibility = 'hidden'; 
     return false; 
    } 
} 
</script> 

和

<a id="show-div" href="#">link</a> 
<div id="popup-div"> 
<div id="popup-header"> 
<div id="popup-title">...Popup title...</div> 
<a id="hide-div" href="#">X</a></div> 
<div id="popup-body"> 
<p>This is the content of the div....</p> 
</div> 
</div> 
<a id="show-div2" href="#">link2</a> 
<div id="popup-div2"> 
<div id="popup-header"> 
<div id="popup-title">...Popup title2...</div> 
<a id="hide-div2" href="#">X</a></div> 
<div id="popup-body"> 
<p>This is the content of the div2....</p> 
</div> 
</div> 

Answer 1

我相信以下是您想....

Demo

JS代码：

var show = document.getElementById('show-div'); 
var hides = document.getElementsByClassName('hide-div'); 
var popups = document.getElementsByClassName("popup-div"); 

show.onclick = function (e) { 
    for (var i = 0; i < popups.length; i++) { 
     popups[i].style.visibility = 'visible'; 
    } 
    return false; 
} 

for (var j = 0; j < hides.length; j++) { 
    hides[j].onclick = function (e) { 
     this.parentNode.parentNode.style.visibility = 'hidden'; 
     return false; 
    } 
} 

HTML代码：

<a id="show-div" href="#">Show/Hide</a> 

<div id="popup-div" class="popup-div"> 
    <div id="popup-header"> 
     <div id="popup-title">...Popup title...</div> 
<a id="hide-div" class="hide-div" href="#">X</a> 

    </div> 
    <div id="popup-body"> 
     <p>This is the content of the div....</p> 
    </div> 
</div> 
<div id="popup-div" class="popup-div"> 
    <div id="popup-header"> 
     <div id="popup-title">...Popup title...</div> 
<a id="hide-div" class="hide-div" href="#">X</a> 

    </div> 
    <div id="popup-body"> 
     <p>This is the content of the div....</p> 
    </div> 
</div>