GMs*_*soF 2 html javascript css modal-dialog
我是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>
这是一个非常简单的代码.我的问题是为什么在第二层弹出后第一层不可点击？我会认为因为第二层停留在第一层之上并且阻挡了第一层.但为什么我可以单击"链接"来触发函数overlay()？第二层的可见性是隐藏的,但它仍然保持在第一层的顶部吗？该功能甚至没有改变z-index.我无法弄明白,为什么.
另一个问题是,现在我如何解散第二层并回到第一层？一些简单的代码表示赞赏.
感谢您的帮助!
您无法在叠加层下方单击的原因是因为存在底层图层.它的背景是透明的,但都是一样的.
有关更好的说明,请参见http://jsfiddle.net/CSLD2/1/.
要关闭图层,只需插入某种关闭按钮并使其onclick事件将图层设置为不可见.您也可以考虑使用某种成熟的叠加库,因为它已针对不可预测的HTML条件进行了测试.