CSS遮罩层对话框

最新推荐文章于 2023-02-14 09:42:07 发布

原创最新推荐文章于 2023-02-14 09:42:07 发布 · 634 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS和jQuery实现遮罩层及对话框的方法。通过设置遮罩层的z-index和覆盖范围，确保其始终位于浏览器顶层。对话框采用固定的定位方式，并通过jQuery动态调整位置以保持居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS遮罩层对话框简单实现

0.前期准备工作

jquery 1.8支持
HTML
CSS

1.创建一个在浏览器顶层的“遮罩层”

<div id="mask" class="mask"></div>

    .mask {
        z-index:98;
        background-color: #000;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom:0;
        filter:alpha(opacity=80);  /*支持 IE 浏览器*/
        -moz-opacity:0.80; /*支持 FireFox 浏览器*/
        opacity:0.80;  /*支持 Chrome, Opera, Safari 等浏览器*/
    }

要保证遮罩层在浏览器顶层，z-index设置比较高的值(一般最顶层还要显示一个信息对话框什么的)，现在考虑如何让它铺满整个页面。

设置left、top、right、bottom都为0，这样就保证遮罩层铺满当前页面；

设置position为fixed保证浏览器滚动条滚动后仍保持遮蔽效果；

设置调整filter、-moz-opacity和opacity透明度兼容性，保证遮罩效果。

2.创建一个信息对话框

<div id="dialog" class="modal">
    <div class="modal-header">
        <div class="close">x</div>
            test header
    </div>
    <div class="modal-body">
         test body
    </div>
    <div class="modal-footer">
        <button>确认</button>
        <button>关闭</button>
    </div>
</div>

    .modal {
        z-index: 99;
        position: fixed;
        background-color: #ffffff;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0 0 3px 3px #888;
        -webkit-box-shadow: 0 0 3px 3px#888;
        box-shadow: 0 0 3px 3px #888;
    }
    .modal-header {
        z-index: 99;
        padding: 9px 15px;
        border-bottom: 1px solid #eee;

    }

    .modal-body{
        padding: 9px 15px;

    }


    .modal-footer{
        text-align: right;
        border-top: 1px solid #eee;
    }

    .close{
        cursor: pointer;
        float: right;
        font-size: 20px;
        line-height: 20px;
        color: #ccc;
        opacity: 0.80;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }

    .close:hover{
        color: #000;
    }

保证dialog的z-index在mask上面，样式可以自己调整，阴影和圆角看个人喜欢。

3.jquery显示控制

 $(function () {
	

        $('#mask').click(function(){
            hideMask();
        });

        $('#dialog .close').click(function(){
            hideMask();
        });


        var windowWidth, windowHeight;
        if (self.innerHeight) { // all except Explorer
            if (document.documentElement.clientWidth) {
                windowWidth = document.documentElement.clientWidth;
            } else {
                windowWidth = self.innerWidth;
            }
            windowHeight = self.innerHeight;
        } else {
            if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else {
                if (document.body) { // other Explorers
                    windowWidth = document.body.clientWidth;
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        $('#dialog').css("left",(windowWidth-$('#dialog').width())/2);
        $('#dialog').css("top",(windowHeight-$('#dialog').height())/2);

    });

    /**
     * 隐藏蒙版和对话框
     */
    function hideMask(){
        $('#dialog').fadeOut(900);
        $('#mask').fadeOut(1000);
    }