I am very beginner to Javascript. Just trying to learn modal dialog but encounter some issues, the code is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Click here to show the overlay</title>
<style>
#overlay {
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align:center;
z-index: 200;
background-image:url(maskBG.png);
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
<script>
function overlay(){
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center"><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>
<p align="center">this is my text... this is my text... this is my text... this
is my text... this is my text... this is my text...this is my text... this
is my text... this is my text... this is my text...</p>
<p align="center"><b>this is my text... this is my text... this is my text... this
is my text... t</b></p>
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
</body>
</html>
This is a very simple code. My question is why the layer one is not clickable after layer two popup? I will think as because layer two stay on top of layer one and has blocked layer one. But why I can click the "link" to trigger the function overlay()? The layer two's visibility is hidden but it still stay on top of layer one right? The function didn't even change the z-index. I can't figure it out, why.
Another question is, now how am I able to dismiss the layer two and go back to layer one? Some simple code is appreciated.
Thank for any help!
I am very beginner to Javascript. Just trying to learn modal dialog but encounter some issues, the code is as below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Click here to show the overlay</title>
<style>
#overlay {
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align:center;
z-index: 200;
background-image:url(maskBG.png);
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
<script>
function overlay(){
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center"><a href='#' onclick='overlay()'>Click here to show the overlay</a></p>
<p align="center">this is my text... this is my text... this is my text... this
is my text... this is my text... this is my text...this is my text... this
is my text... this is my text... this is my text...</p>
<p align="center"><b>this is my text... this is my text... this is my text... this
is my text... t</b></p>
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
</body>
</html>
This is a very simple code. My question is why the layer one is not clickable after layer two popup? I will think as because layer two stay on top of layer one and has blocked layer one. But why I can click the "link" to trigger the function overlay()? The layer two's visibility is hidden but it still stay on top of layer one right? The function didn't even change the z-index. I can't figure it out, why.
Another question is, now how am I able to dismiss the layer two and go back to layer one? Some simple code is appreciated.
Thank for any help!
Share Improve this question asked Sep 13, 2012 at 16:52 Sam YCSam YC 11.6k22 gold badges111 silver badges163 bronze badges1 Answer
Reset to default 5Reason why you can't click underneath the overlay is because there's an underlay layer. Its background is transparent, but there all the same.
See http://jsfiddle/CSLD2/1/ for a better illustration.
To close the layer, simply insert a close button of some kind and have its onclick event set the layer to invisible. You may also consider using a mature overlay library of some kind, as it's been tested against unpredictable HTML conditions.