Html + Css +Javascript实现模态框

• 首先在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>
<a onclick="overlay()" href="">点击这里</a>

• 定义两个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";
}