【html/css】模态框的实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 0.5; /* 背景半透明 */
}
/* 模态框样式 */
.modal-data{
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
</head>
<body style="position: relative">
<div style="width: 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>