前话:今天用 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. 你的GitHub,怎么和我用的不太一样?

    说起代码托管,相信绝大多数人脑海中浮现出的第一个词都是"GitHub".经过多年的发展,GitHub俨然已经成为了代码托管领域的标签- 随着国内互联网环境的优化,互联网产业链的不断 ...

  2. Redis(二):单机数据库的实现

    概要 本部分内容主要是研究单机数据库.分别介绍单机数据库的实现原理,数据库的持久化,Redis事件,服务器维护管理客户端以及单机服务器的运作机制. 数据库 数据库结构 Redis数据库由redis.h ...

  3. 啃算法:归并排序及JavaScript实现

    在学习归并排序之前,有必要了解分治法,因为归并排序正是应用了分治模式.(基本定义摘自<算法导论>) 一.分治法 1.思想: 将原问题分解为几个规模较小但类似于原问题的子问题,递归地求解这些 ...

  4. 多重背包转化成完全背包 E - Charlie's Change

    http://poj.org/problem?id=1787 这个题目我一看就觉得是一个多重背包,但是呢,我不知道怎么输出路径,所以无可奈何,我就只能看一下题解了. 看了题解发现居然是把多重背包转化成 ...

  5. spring学习笔记(八)webSocket

    知识储备 什么是stomp? 我们可以类比TCP与Http协议,我们知道Http协议是基于TCP协议的,Http协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节,我们在编码时候只要 ...

  6. 【Flink】使用之前,先简单了解一下Flink吧!

    目录 Flink简单介绍 概述 无边界数据流和有边界数据流 技术栈核心组成 架构体系 重要角色 Flink与Spark架构概念转换 Flink简单介绍 概述    在使用Flink之前,我们需要大概知 ...

  7. python语法学习第七天--文件

    打开文件:open() 使用 open() 方法一定要保证关闭文件对象,即调用 close() 方法. open(file, mode='r', buffering=-1, encoding=None ...

  8. [hdu1317]spfa

    题意:给一个有向图,每个点有一个权值,从1个点出发,初始能量有100,每到达新的点,能量就会加上那个点的权值,当能量大于0时才能继续走,可以多次进入同一点.问能否到达目标点 思路:如果没正权环,则直接 ...

  9. Redis 6.0 多线程重磅发布!!!

    Redis 6.0在5.2号这个美好的日子里悄无声息的发布了,这次发布在IT圈犹如一颗惊雷一般,因为这是redis最大的一次改版,首次加入了多线程. 作者Antirez在RC1版本发布时在他的博客写下 ...

  10. mybatis 插入数据返回ID

    hibernate中插入数据后会返回插入的数据的ID,mybatis要使用此功能需要在配置文件中显示声明两个属性即可: