模态框

最新推荐文章于 2024-04-20 12:04:09 发布

原创最新推荐文章于 2024-04-20 12:04:09 发布 · 159 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#模态框

本文详细介绍了如何在HTML中创建模态框及其覆盖层，并通过自定义函数来控制模态框的显示与隐藏。实现了点击特定元素即可打开或关闭模态框的效果。

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