纯js实现自定义模态框

Posted 2020-09-19

     <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 -->