模态窗口javascript css覆盖答案

【问题标题】：Modal window javascript css overlay模态窗口javascript css覆盖
【发布时间】：2026-02-10 19:15:02
【问题描述】：

现在我必须单击链接才能打开模式窗口。我不知道如何在不点击链接的情况下加载这个东西。谁能告诉我如何做到这一点？谢谢！

<!DOCTYPE>
<script type="text/javascript">
function overlay() {
        el = document.getElementById("overlay");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<style type="text/css">
body {
     height:100%;
     margin:0;
     padding:0;
}
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;

        background:black;
           /* Required for IE 5, 6, 7 */         /* ...or something to trigger hasLayout, like zoom: 1; */         width: 100%;           /* Theoretically for IE 8 & 9 (more valid) */         /* ...but not required as filter works too */         /* should come BEFORE filter */         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";          /* This works in IE 8 & 9 too */         /* ... but also 5, 6, 7 */         filter: alpha(opacity=90);          /* Older than Firefox 0.9 */         -moz-opacity:0.9;          /* Safari 1.x (pre WebKit!) */         -khtml-opacity: 0.9;          /* Modern!         /* Firefox 0.9+, Safari 2?, Chrome any?         /* Opera 9+, IE 9+ */         opacity: 0.9; 
}
#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}
</style>
</head>
<body>
<div id="overlay">
     <div>
          <p>Content you want the user to see goes here.</p>
          Click here to [<a href='#' onclick='overlay()'>close</a>]
     </div>
</div>

<p><a href='#' onclick='overlay()'>Click here to show the overlay</a>
</p>
</body>
</html>

【问题讨论】：

标签： css load window modal-dialog

【解决方案1】：

如果你想在加载时调用它，那么像这样更改你的 body 标签：

<body onLoad="overlay()">

加载页面后立即显示对话框。

如何让这个东西加载无需点击链接

你想要哪种方式？鼠标悬停？负载？更具体。

【讨论】：