模态框

首先在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";
}