<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
100%;
height:100%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 0.5; /* 背景半透明 */
}
/* 模态框样式 */
.modal-data{
300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
</head>
<body style="position: relative">
<div style=" 600px; height: 600px;">
<div id="modal-overlay">
<div class="modal-data">
<p>一个简单的模态框。</p>
<p>点击 <a href="#" onclick="overlay()">这里</a>关闭</p>
</div>
</div>
</div>
<a href="#" onclick="overlay()">显示对话模态框</a>
<script type="text/javascript">
function overlay () {
var e1 = document.getElementById('modal-overlay');
e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</body>
</html>
注意：#modal-overlay 一定要是相对body来设置绝对定位。若是不给body设置position，#modal-overlay 就是相对html设置了绝对定位，当html页面太高或者太宽而出现滚动条的时候，#modal-overlay 就没有覆盖整个页面的效果了。