CODEWITHSUNDEEP
javascripthtmlcssmodal-dialog
Sam YC
Sam YC

Reputation: 11617

javascript modal dialog

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...&nbsp;this 
is my text... this is my text...&nbsp;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...&nbsp;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!

Upvotes: 2

Views: 17899

Answers (1)

pp19dd
pp19dd

Reputation: 3633

Reason 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.net/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.

Upvotes: 5

Related Questions