模态窗口javascript css overlay

时间:2011-07-05 05:54:51

标签: css load window modal-dialog

现在我必须点击链接打开一个模态窗口。我不知道如何在不必点击链接的情况下加载这个东西。任何人都可以告诉我该怎么做? 谢谢!

<!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>

1 个答案:

答案 0 :(得分:1)

如果你想在加载时调用它,那么改变你的身体标签:

<body onLoad="overlay()">

现在,只要页面加载,就会显示对话框。


  

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

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