zoukankan      html  css  js  c++  java
  • layui 让弹窗始终居中于屏幕

    前话:今天用 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,
                 w,
                height: h
            };
        }

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

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

    // 滚动条当前中间位置距离顶部高度
    var y = ScollPostion().top + $(window).height()/2;
    
    // 用弹窗参数 offset 坐标
    layer.confirm('弹窗?', {offset:y})

    效果如下:

  • 相关阅读:
    day7随笔
    day6随笔
    day5笔记
    uniapp 全屏蒙版下的其他view禁止滑动
    uniapp scroll-view 组件右侧的滚动条
    uni 组件 头部
    根据两点的经纬度查询两点间的距离
    仅供学习使用的一些 相关vue类
    仅供学习使用的一些样式+行为
    百度地图简单调用
  • 原文地址:https://www.cnblogs.com/pyspang/p/12943953.html
Copyright © 2011-2022 走看看