<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#pageMask {
visibility: hidden; //使pageMask元素不可见
position: absolute; //定位pageMask元素
left: 0px; //定位pageMask元素
top: 0px; //定位pageMask元素
width:100%;
height:100%;
text-align: center; //文本对其方式
z-index: 1100; //指定一个元素的堆叠顺序
">#333;//设置背景色
opacity: 0.6; //设置元素的透明度级别
}
#ModalBody{
background: white; //设置背景
width: 50% !important;
height: 50% !important;
position:absolute; //定位ModalBody元素
left: 25%;
top: 25%;
z-index: 1101; //指定元素的堆叠顺序
border: 1px solid; //边框1px的实线
display: none; //不可见
}
#closeModalBtn{
position: static; //静态定位的元素不会受到top,bottom,left,right影响
margin-top: 5px; //设置closeModalBtn元素的上部边距
margin-right: 1%; //右部边距
float: right; //右侧移动
font-size: 14px; //字体大小
background: #ccc000;
cursor: pointer; //设置光标形态，pointer光标呈现为指示链接的指针（一只手）
}
</style>
</head>
<body>
<div class="content">
<h1>Test Modal</h1>
<div id="pageMask"></div> <!--遮盖层-->
<button class="showModalBtn" id="showModalBtn">Btn</button>
<div> <!--主页面-->
Page Content...
</div>
</div>
<div id="ModalBody"> <!--模态框-->
<button id="closeModalBtn" style="display: none;">Close</button>
<div>Test Modal Body...</div>
</div>
<script>
window.onload = function(){
expandIframe();
}
function expandIframe(){
var mask = document.getElementById("pageMask");
var modal = document.getElementById("ModalBody");
var closeBtn = document.getElementById("closeModalBtn");
var btn = document.getElementById("showModalBtn"); btn.onclick = function(){ modal.style.display = (modal.style.display == "block")? "none" : "block"; closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block"; mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible"; } closeBtn.onclick = function(){ modal.style.display = (modal.style.display == "block")? "none" : "block"; closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block"; mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible"; } }</script></body></html>