1
今すぐモーダルウィンドウを開くには、リンクをクリックする必要があります。私はリンクをクリックすることなく、このことをロードする方法を知らない。誰も私にこれを行う方法を教えてもらえますか？ ありがとうございました！モーダルウィンドウjavascript css overlay
<!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>