js+css实现遮罩层的效果

最新推荐文章于 2023-09-04 18:20:19 发布

godlike-icy

最新推荐文章于 2023-09-04 18:20:19 发布

阅读量1.4k

点赞数

分类专栏： web前端文章标签： css js javascript html

本文链接：https://blog.csdn.net/qq_43682422/article/details/119416894

版权

web前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

本文介绍了如何利用HTML、CSS和JavaScript创建一个基本的对话框和遮罩层效果。首先，在HTML中定义遮罩层和对话框的样式，并设置初始display为none。然后，通过JavaScript为按钮添加点击事件，以显示或隐藏遮罩层和对话框。CSS中设置了遮罩层的透明度和对话框的位置，确保对话框在遮罩层之上。此外，还提供了按钮和对话框内容的样式。

摘要由CSDN通过智能技术生成

一、上图

在这里插入图片描述

二、原理

1.预先在html里写出遮罩层的样式和对话框的样式，并让他们display为none，通过按钮点击事件绑定js函数修改他们的display为block则可以实现这样的效果。

2.注意的小细节，为了保证对话框在遮罩层的上面，则需要使用z-index让对话框的优先级大于遮罩层，同时遮罩层的优先级也要大于原来的页面才能实现遮罩。

三、代码部分

1.html

 <!-- 这是遮罩层 -->
        <div id="pageShadow"></div>
        <!-- 这里放的是对话框的内容 -->
        <div id="dlg">
            <button class="niceButton4 right" onclick="closeShadow()">x</button>
            <h3 class="content">这里一般放一些东西</h3>
        </div>
        <!-- 页面内容 -->
        <div class="content">
            <h3>这里放主要内容<h3>
            <button class="niceButton4" onclick="openShadow()">点击打开遮罩层</button>
        </div>

2.css部分

  *{
                margin: 0;   
                padding: 0;
            }
            /* 按钮样式 */
            .niceButton4 {
                background-color: skyblue;
                border: none;
                border-radius: 5px;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                cursor: pointer;
                transition-duration: 0.4s;
                -webkit-transition-duration: 0.4s;
            }
            .niceButton4:hover {
                box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
                    0 17px 50px 0 rgba(0, 0, 0, 0.19);
            }
            /* 让 关闭按钮x  出现在对话框最右边 */
            .right{
                position: absolute;
                top:5px;
                right: 5px;
            }
            /* 遮罩层样式 */
            #pageShadow{
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 999;
                display: none;  
                background: rgba(0, 0, 0, 0.6);
            }
            /* 对话框样式 */
            #dlg{
                width: 500px;
                height: 200px;
                background-color: #fff;
                border-radius: 8px;
                position: absolute;
                z-index: 99999;
                top:15%; 
                /* 居中操作 */
                left: 50%;
                transform: translateX(-50%);
                display: none;
            }
            /* 字体样式 */
            .content{
                text-align: center;
                margin: auto;
                color:pink;
            }

3.js部分

   //  获取dom
        var pageShadow = document.getElementById("pageShadow");
        var dlg = document.getElementById("dlg");
        // 打开遮罩层和对话框
        function openShadow(){
            pageShadow.style.display = "block";
            dlg.style.display = "block";
        }
        // 关闭遮罩层和对话框
        function closeShadow(){
            pageShadow.style.display = "none";
            dlg.style.display = "none";
        }