前话:今天用 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 让弹窗始终居中于屏幕的更多相关文章

  1. layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  2. jq弹窗(获取页面宽高,滚轮高度,始终居中)

    jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...

  3. easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()

    easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...

  4. JQuery 弹出层,始终显示在屏幕正中间

    1.让层始终显示在屏幕正中间: 样式代码: .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-ali ...

  5. layui layui.open弹窗后按enter键不停弹窗问题的解决

    问题描述:layui.open弹窗后,点击enter键会不停弹窗,背景颜色变得越来越深 解决办法:1.使用回调函数让按钮失去焦点 var info = layer.open({ type: 2 , t ...

  6. html之div始终停留在屏幕中间部分

    需求: 使得某一个div始终停留在屏幕中间 实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  7. java JButton按钮始终居中

    怎么做的拖动窗口内部的按钮始终居中呢? 很简单把按钮放入Box中进行了. 代码如下: import javax.swing.Box; import javax.swing.JButton; impor ...

  8. 网站Bannr适应大小屏幕,图片始终居中不被压缩

    网站banner一般都是2000px以上的宽度,为了让在小的屏幕上图片不被压缩并且是居中表现: 方法是让包裹图片全部的那个大容器始终正居中 <!-- banner --> <div ...

  9. CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中

    body {   margin-top:0px; margin-right:0px;   margin-bottom:0px;   margin-left:0px;   background-colo ...

随机推荐

  1. java之重载与重写

    重写(override) 重写是子类对父类的允许访问的方法的重新编写,方法名,返回值类型和形参列表都不能改变,唯一恩能够改变的是方法体. 重写的好处是可以根据子类的需要的行为来实现父类的方法. 重写方 ...

  2. mac OS 查看开机/关机/重启记录

    last 查看最近的开关机.登录用户等记录 以及操作时间节点. last | grep reboot 查看重启记录 last | grep shutdown 查看关机记录

  3. 日日算法:Dijkstra算法

    介绍 Dijistra算法作为一种最短路径算法,可以用来计算一个节点到图上其他节点的最短距离. 主要是通过启发式的思想,由中心节点层层向外拓展,直到找到中点. 适用于无向图和有向图. 算法思想 假设我 ...

  4. javascript中Function、ArrowFunction和GeneratorFunction介绍

    ECMAScript规范中对Function的文档描述,我认为是ECMAScript规范中最复杂也是最不好理解的一部分,它涉及到了各方面.光对Function就分了Function Definitio ...

  5. chrome清除缓存、不使用缓存而刷新快捷键

    Ctrl+Shift+Del  清除Google浏览器缓存的快捷键 Ctrl+Shift+R  重新加载当前网页而不使用缓存内容 转载于:https://www.cnblogs.com/JAVA-ST ...

  6. 用Swoole4 打造高并发的PHP协程Mysql连接池

    码云代码仓库:https://gitee.com/tanjiajun/MysqlPool 代码仓库:https://github.com/asbectJ/swoole4.git 前言 在写这篇文章之前 ...

  7. 信息竞赛进阶指南--递归法求中缀表达式的值,O(n^2)(模板)

    // 递归法求中缀表达式的值,O(n^2) int calc(int l, int r) { // 寻找未被任何括号包含的最后一个加减号 for (int i = r, j = 0; i >= ...

  8. JavaSpring中级联查询

    一对一级联查询映射文件PersonMapper.xml代码: <?xml version="1.0" encoding="UTF-8"?> < ...

  9. 面试官没想到一个Volatile,我都能跟他扯半小时

    点赞再看,养成习惯,微信搜索[三太子敖丙]关注这个互联网苟且偷生的工具人. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的 ...

  10. 01_互联网基本原理和HTML入门

    从"上网"说开去 1.上网就是请求数据 老师现在进行一个互联网原理的整体感知的教学,你注意,整体感知中,一些具体的细节,可能令你没有安全感(很多的知识盲点).没有关系,老师进行的是 ...