I have a JavaScript to open a DIV as popup. But now I want to open several different popups from different DIVS and I can't get it to work properly.
I use the following 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>
and for the div I use the followin code:
<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>
This works for 1 link but even when I use a different DIV ID's (and associated var element like "var popup1 = document.getElementById('popup-div1');" and popup1 onclick events) I can't get it work properly. How can I make it work with several links with all it's own DIV with content.
(as I can't answer my own question, here is how I fixed it) I made it work with the following code:
<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>
and
<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>
I believe following is that you want....
JS Code:
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 Code:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.