模态窗口javascript CSS覆盖 [英] Modal window javascript css overlay
本文介绍了模态窗口javascript CSS覆盖的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在，我必须单击链接以打开模式窗口.我不知道如何在不单击链接的情况下将其加载.谁能告诉我该怎么做?谢谢！
Right now I have to click the link to open a modal window. I don't know how to make this thing to loading without having to click the link. Can anyone please show me how to do this? Thank you!
<!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>
推荐答案
如果要在加载时调用它，请按如下所示更改您的body标签:
If you want to call it on load then change your body tag like this:
<body onLoad="overlay()">
页面加载后，现在将显示一个对话框.
Now dialog will be shown as soon as the page is loaded.
如何使此东西加载无需点击链接
how to make this thing to loading without having to click the link
您想要哪种方式?在鼠标悬停时?负载?更具体些.
In which way do you want? on mouse hover? on load? Be more specific.
这篇关于模态窗口javascript CSS覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
