Question

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

这是一个非常简单的代码。我的问题是为什么在第二层弹出后第一层不可点击？我会认为因为第二层停留在第一层之上并且阻挡了第一层。但为什么我可以点击“链接”来触发功能叠加（）？第二层的可见性是隐藏的，但它仍然保持在第一层的顶部吗？该功能甚至没有改变z-index。我无法弄明白，为什么。

另一个问题是，现在我如何解散第二层并回到第一层？一些简单的代码是值得赞赏的。

感谢您的帮助！

Answer 1

您无法点击叠加层下方的原因是因为存在底层图层。它的背景是透明的，但都是一样的。

有关更好的说明，请参阅http://jsfiddle.net/CSLD2/1/。

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

javascript模态对话框

1 个答案: