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

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

  1. function ScollPostion() { //滚动条位置
  2. var t, l, w, h;
  3. if(document.documentElement && document.documentElement.scrollTop) {
  4. t = document.documentElement.scrollTop;
  5. l = document.documentElement.scrollLeft;
  6. w = document.documentElement.scrollWidth;
  7. h = document.documentElement.scrollHeight;
  8. } else if(document.body) {
  9. t = document.body.scrollTop;
  10. l = document.body.scrollLeft;
  11. w = document.body.scrollWidth;
  12. h = document.body.scrollHeight;
  13. }
  14. return {
  15. top: t,
  16. left: l,
  17. width: w,
  18. height: h
  19. };
  20. }

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

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

  1. // 滚动条当前中间位置距离顶部高度
  2. var y = ScollPostion().top + $(window).height()/2;
  3.  
  4. // 用弹窗参数 offset 坐标
  5. 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. 【总结】Centos中,Kerberos安装

    1.安装软件包 安装必须的工具 bison, make, binutils 下载压缩包至/usr/local目录下,并解压 [root@localhost local]# ls krb5-1.14.t ...

  2. LeetCode 25. K 个一组翻转链表 | Python

    25. K 个一组翻转链表 题目来源:https://leetcode-cn.com/problems/reverse-nodes-in-k-group 题目 给你一个链表,每 k 个节点一组进行翻转 ...

  3. 智能称体脂称实现(datasheet篇)

    (本文均出于个人理解而写,仅用于学习和交流,某些过程可能不一定正确,希望各位提出意见进行交流,共同进步) TI的参考方案是采用AFE4300芯片 同时进行生物阻抗身体成分测量和体重测量,以MSP430 ...

  4. python 中关于无法导入自己写的类。解决方法

    1.错误描述 之前在学习python的过程中,导入自己写入的包文件时.from 自己写的类,会发现没有弹出选择.并且全输入类名称后会发现类名与相关导入的方法会爆红.如图: 2.原因分析 pycharm ...

  5. Python第三方库之Numpy库

    概述 Numpy  最基本的库,是用于处理含有同种元素的多维数组运算的第三方库 —科学计算包,python数据分析及科学计算的基础库,几乎支撑所有其他库 —支持N维数组运算.处理大型矩阵.成熟的广播函 ...

  6. Java——多线程超详细总结

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 一.线程概述 几乎所 ...

  7. node.js开发指南系列(1)partial is not defined

    ejs视图引擎中使用partial函数: <ul><%- partial('listitem', items) %></ul> 报错:partial is not ...

  8. u-boot 移植(一)编译环境搭建

    u-boot 移植(一)编译环境搭建 soc:s3c2440 board:jz2440 uboot:u-boot-2016.11 toolchain:gcc-linaro-7.4.1-2019.02- ...

  9. HDU 3874 Necklace 区间查询的离线操作

    题目: http://acm.hdu.edu.cn/showproblem.php?pid=3874 对需要查询的区间按右端点排序,然后从左到右依次加入序列中的元素,同时更新,更新的方法是,把上一次出 ...

  10. [hdu4301]DP

    题意:给一个2*n的矩形块,求把它分成k个连通块的方法数.(有公共边即视为联通) 思路:由于宽度只有2,于是很容易设计状态使问题满足阶段性以及无后效性.具体来说,令dp[i][j][0]和dp[i][ ...