2

我是 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...&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>

这是一个非常简单的代码。我的问题是为什么在第二层弹出后第一层不可点击？我会认为因为第二层停留在第一层之上并且阻挡了第一层。但是为什么我可以点击“链接”来触发函数overlay()呢？第二层的可见性是隐藏的，但它仍然停留在第一层的顶部，对吗？该函数甚至没有改变 z-index。我想不通，为什么。

另一个问题是，现在我怎样才能解除第二层并回到第一层？一些简单的代码表示赞赏。

感谢您的帮助！

4

1 回答 1

5

您无法在覆盖下方单击的原因是因为有一个底层。它的背景是透明的，但都一样。

请参阅http://jsfiddle.net/CSLD2/1/以获得更好的说明。

要关闭图层，只需插入某种类型的关闭按钮并让其 onclick 事件将图层设置为不可见。您也可以考虑使用某种成熟的覆盖库，因为它已经针对不可预测的 HTML 条件进行了测试。

于 2012-09-13T17:01:17.957 回答