前话:今天用 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. DM 源码阅读系列文章(六)relay log 的实现

    2019独角兽企业重金招聘Python工程师标准>>> 作者:张学程 本文为 DM 源码阅读系列文章的第六篇,在 上篇文章 中我们介绍了 binlog replication 处理单 ...

  2. 你知道吗?iOS不少程序常传送装置信息给第三方

    2019独角兽企业重金招聘Python工程师标准>>> 华盛顿邮报( The Washington Post)与隐私程序开发商Disconnect共同进行的研究揭露,许多iOS程序其 ...

  3. Redis为什么是单线程的

    一.前言   最近在学习Redis,这篇文章就来简单聊聊一道常考的面试题--Redis为什么是单线程的.废话不多说,直接开始吧. 二.正文 2.1 为什么需要多线程   首先,现在的CPU一般都是由多 ...

  4. P4768 [NOI2018]归程(kruskal 重构树)

    洛谷P4768 [NOI2018]归程 LOJ#2718.「NOI2018」归程 用到 kruskal 重构树,所以先说这是个啥 显然,这和 kruskal 算法有关系 (废话 这个重构树是一个有点权 ...

  5. postman(动态数据获取)

    一:返回报文为 json 格式 示例:因为充值记录接口中需要用到登录接口返回报文中的信息如下 1.以获取token(JWT)和uid为例 2.在登录接口的tests中写入代码(因为登录接口报文信息中有 ...

  6. vue 比 js的强大

    //js写留言板 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  7. redis 6.0下redis-cluster-proxy代理尝试

    伴随着Redis6.0的发布,作为最令人怦然心动的特性之一,Redis官方同时推出Redis集群的proxy了:redis-cluster-proxy,https://github.com/Redis ...

  8. 自定义Element父子不关联的穿梭树

    Element自身是有一个Transfer穿梭框组件的,这个组件是穿梭框结合checkbox复选框来实现的,功能比较单一,自己想实现这个功能也是很简单的,只是在项目开发中,项目排期紧,没有闲功夫来实现 ...

  9. Tomcat Ghostcat - AJP协议漏洞DEBUG

    环境 IntelliJ IDEA 2020.1 x64 tomcat-8.5.46 配置 pom.xml <?xml version="1.0" encoding=" ...

  10. CC2530ADC应用

    ADC单通道外部电压采集 需要设置一个上机位命令控制字符. 系统时钟初始化——32MHZ晶振 串口0函数初始化——设置串口对应引脚,波特率,清楚中断标志 串口0接收中断响应函数——U0DBUF将控制命 ...