純js實現自定義模態框

     <div id="modal-overlay"> 
    <div class="modal-data">        
        <p>一個很簡單的模態對話框 </p>
        <p>點擊<a onclick="overlay()" href="">這里</a>關閉</p>
    </div>
</div>

<a href="#" onclick="overlay()">顯示模態對話框</a>
        <style>/* 定義模態對話框外面的覆蓋層樣式 */
        #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>
                <script>function overlay(){
   var e1 = document.getElementById('modal-overlay');            
   e1.style.visibility = (e1.style.visibility == "visible")? "hidden" : "visible";
}</script>
    
<!-- Generated by RunJS (Sat May 20 17:44:01 CST 2017) 0ms -->