码迷,mamicode.com
首页 > 其他好文 > 详细

layui 让弹窗始终居中于屏幕

时间:2020-05-23 20:42:57      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:off   info   页面   window   confirm   方法   坐标   滚动条   lse   

前话:今天用 layer.confirm()  弹窗的时候,滚动到页面尾部再弹窗时,发现弹窗还显示在上面,要滚动会上面才能看到。

度娘找了一个获取滚动条位置的方法:

    function ScollPostion() { //滚动条位置
        var t, l, w, h;
        if(document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight;
        } else if(document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
        }
        return {
            top: t,
            left: l,
            width: w,
            height: h
        };
    }

要让弹窗显示在当前滚动位置中间才对,

所以,我拿的是 当前滚动条的高度 + 当前可见区域大小的一半高度 ,(这是我粗略算的,更精确定位中间还可以优化)

// 滚动条当前中间位置距离顶部高度
var y = ScollPostion().top + $(window).height()/2;

// 用弹窗参数 offset 坐标
layer.confirm(‘弹窗?‘, {offset:y})

效果如下:

 

技术图片

 

layui 让弹窗始终居中于屏幕

标签:off   info   页面   window   confirm   方法   坐标   滚动条   lse   

原文地址:https://www.cnblogs.com/pyspang/p/12943953.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!