Modal window javascript css overlay
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>
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.
加载中,请稍侯......
精彩评论