javascript模式对话框

问题描述：

我对Javascript很初学。试图学习模式对话框但遇到一些问题，代码如下：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。我无法弄清楚，为什么。

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

感谢您的帮助！

答

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

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

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

嗨，谢谢，现在我知道如何关闭了。我第一次仍然不明白为什么我们可以点击“链接”并设置可见度？虽然隐藏了可视性，但上层始终处于上层。由于上层保持最高层，我们甚至不应该能够点击右侧的“链接”？但是怎么来？ – GMsoF

javascript模式对话框

相关推荐