首先在html上定义两个div元素,其中外层div表示模态框外面的覆盖层(overlay layer), 内层的div表示模态框。
<div id="modal-overlay"> <div class="modal-data"> <p>模态框</p> <p>点击<a onclick="overlay()" href="">这里</a>关闭</p> </div> </div>
定义两个div样式
#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; }
最后添加一个控制模态框显示与隐藏的函数
function overlay(){ var e1 = document.getElementById('modal-overlay'); e1.style.visibility = (e1.style.visibility == "visible" ) ? "hidden" : "visible"; }