javascript 模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12411136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript modal dialog
提问by GMsoF
I am very beginner to Javascript. Just trying to learn modal dialog but encounter some issues, the code is as below:
我是 Javascript 的初学者。刚想学习模态对话框但是遇到了一些问题，代码如下：
<!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.
这是一个非常简单的代码。我的问题是为什么在第二层弹出后第一层不可点击？我会认为是因为第二层停留在第一层的顶部并阻止了第一层。但是为什么我可以点击“链接”来触发函数overlay()？第二层的可见性被隐藏，但它仍然保留在第一层的顶部，对吗？该函数甚至没有更改 z-index。我想不通，为什么。
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!
感谢您的帮助！
回答by pp19dd
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.
请参阅http://jsfiddle.net/CSLD2/1/以获得更好的说明。
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.
要关闭图层，只需插入某种关闭按钮，并让它的 onclick 事件将图层设置为不可见。您也可以考虑使用某种成熟的覆盖库，因为它已经针对不可预测的 HTML 条件进行了测试。
