关于点击显示遮罩层弹窗

宋美立

于 2023-03-31 10:41:53 发布

阅读量206

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_55975880/article/details/129874372

版权

文章讲述了如何使用CSS中的fixed定位来创建一个始终覆盖整个屏幕的遮罩层，并且在页面滚动时保持存在的效果。同时，内部的弹窗也通过相同的方法进行定位，确保其在屏幕上的位置固定。这种方法常用于网页设计中的模态对话框或者提示信息展示。

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

静态搭建

<div class="mask">
        <div class="mask_info">
            添加内容
        </div>
    </div>

采用固定定位将遮罩层定位在整个屏幕中，这样即使向下滑动遮罩层也存在。
内部的弹窗也可以使用固定定位。

.mask {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .mask_info {
        width: change_width(480);
        height: change_height(500);
        background-color: #FFF;
        position: fixed;
        top: change_height(290);
        left: change_width(721);
     }
}