网页弹出遮罩层时页面向右偏移出现抖动问题

最新推荐文章于 2024-04-16 11:10:53 发布

Buddha_ITXiong

最新推荐文章于 2024-04-16 11:10:53 发布

阅读量1.6k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/Buddha_ITXiong/article/details/88948445

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

网页中经常会用到遮罩层的情况，在出现遮罩层的时候页面会整体向右偏移一段距离，因此会出现页面抖动，用户体验不好。

首先我们要思考为什么会出现这种现象：

1：写遮罩层的时候我们一般会给它设置fixed定位

2：为了不让遮罩层下面的内容可滚动，我们一般会把body设置为overflow:hidden;

当遮罩层出现的时候，会把浏览器默认的17px宽度的滚动条给隐藏掉，这时候页面就会向右偏移17px，既然我们已经找到了问题的根源那解决问题就好办了：

解决方法：

1.在显示遮罩层之前，先把根元素的border-right设置为17px宽的透明属性，这样就有个默认的占位

2.在隐藏遮罩层的时候把根元素的border-right设置为none;

代码示例：

弹窗封装：




//js
//定义弹窗模块
var infoWindowCallback = {
    /*
    title:'标题',
    text:'内容',
    btnText:'按钮文字',
    callback:'按钮事件回调'
    */
    init: function (title,text,btnText,callback) {
        this.render(title,text,btnText);
        this.clickHandle(callback);
    },
    render: function (title,text,btnText) {
        var html = '<div id="reminderBox2" class="reminderBox">' +
            '<div class="reminderBox-container">' +
            '<div class="title">'+title+'</div>' +
            '<div class="content">' + text + '</div>' +
            '<button class="btn-confirm" type="button" id="btn-infoBox">'+btnText+'</button>' +
            '</div>' +
            '</div>';
        var root = document.documentElement;
        root.style.borderRight = '17px solid transparent';
        $("body").append(html).css('overflow','hidden');
    },
    clickHandle: function (callback) {
        $("#btn-infoBox").on("click", function () {
            $("#reminderBox2").remove();
            var root = document.documentElement;
            root.style.borderRight = 'none';
            $("body").css('overflow','');
            callback();
        })
    }
};

css样式：

css:

/*提示窗口样式*/
.reminderBox{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
}
.reminderBox .reminderBox-container{
    width: 400px;
    height: 200px;
    background-color: white;
    margin: 15% auto;
    border-radius: 10px;
    text-align: center;
}
.reminderBox .reminderBox-container .title{
    height: 65px;
    line-height: 65px;
    font-size: 20px;
    font-weight: 500;
    color: #313131;
}

.reminderBox .reminderBox-container .content{
    height: 80px;
    line-height: 25px;
    font-size: 16px;
    font-weight: 400;
    color: #959595;
    padding: 0 15px;
}

.btn-confirm{
    width:112px;
    height:36px;
    background:rgba(76,181,255,1);
    color: white;
    border:1px solid rgba(76,181,255,1);
    border-radius:4px;
    cursor: pointer;
}

.btn-cancel{
    width:112px;
    height:36px;
    background:white;
    color: #959595;
    border:1px solid #959595;
    border-radius:4px;
    cursor: pointer;
    margin-left: 10px;
}

页面调用窗口：

        
        
        infoWindowCallback.init("数据更新","请在美编插件中登录公众号更新数据","立即下载",function () {
            window.open("https://www.mbian.com/#/download","_blank");
        });