javascript模式对话框_Javascript_Html_Css_Modal Dialog

javascript模式对话框

javascript html css

javascript模式对话框,javascript,html,css,modal-dialog,Javascript,Html,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;

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


单击此处显示覆盖图
#覆盖层{
可见性：隐藏；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
文本对齐：居中；
z指数：200；
背景图片：url（maskBG.png）；
}
#覆盖分区{
宽度：300px；
保证金：100像素自动；
背景色：#fff；
边框：1px实心#000；
填充：15px；
文本对齐：居中；
}
函数覆盖（）{
el=document.getElementById（“覆盖”）；
el.style.visibility=（el.style.visibility=“可见”）？“隐藏”：“可见”；
}

这是我的文本。。。这是我的文字。。。这是我的文字。。。这
是我的文字。。。这是我的文字。。。这是我的文本…这是我的文本。。。这
是我的文字。。。这是我的文字。。。这是我的文字
这是我的文本。。。这是我的文字。。。这是我的文字。。。这
是我的文字。。。t
您希望用户看到的内容放在此处

这是一个非常简单的代码。我的问题是为什么第二层弹出后第一层不能点击？我会这样想，因为第二层停留在第一层之上，并且阻挡了第一层。但是为什么我可以单击“链接”来触发函数overlay（）？第二层的可见性是隐藏的，但它仍然位于第一层的顶部，对吗？该函数甚至没有更改z索引。我不明白，为什么

另一个问题是，现在我怎样才能摆脱第二层，回到第一层？欢迎使用一些简单的代码

谢谢你的帮助

无法在覆盖下单击的原因是因为有一个参考底图图层。它的背景是透明的，但没有任何变化

有关更好的说明，请参见

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

嗨，谢谢，现在我知道如何关闭。第一次我还是不明白为什么我们可以点击“链接”并设置可见性？上层始终位于上层，尽管其可见性是隐藏的。既然上层都在上面，我们甚至不能点击“链接”对吗？但是为什么呢？