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,
width: w,
height: h
};
}
要让弹窗显示在当前滚动位置中间才对,
所以,我拿的是 当前滚动条的高度 + 当前可见区域大小的一半高度 ,(这是我粗略算的,更精确定位中间还可以优化)
// 滚动条当前中间位置距离顶部高度
var y = ScollPostion().top + $(window).height()/2; // 用弹窗参数 offset 坐标
layer.confirm('弹窗?', {offset:y})
效果如下:

layui 让弹窗始终居中于屏幕的更多相关文章
- layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案
layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...
- jq弹窗(获取页面宽高,滚轮高度,始终居中)
jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...
- easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()
easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...
- JQuery 弹出层,始终显示在屏幕正中间
1.让层始终显示在屏幕正中间: 样式代码: .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-ali ...
- layui layui.open弹窗后按enter键不停弹窗问题的解决
问题描述:layui.open弹窗后,点击enter键会不停弹窗,背景颜色变得越来越深 解决办法:1.使用回调函数让按钮失去焦点 var info = layer.open({ type: 2 , t ...
- html之div始终停留在屏幕中间部分
需求: 使得某一个div始终停留在屏幕中间 实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- java JButton按钮始终居中
怎么做的拖动窗口内部的按钮始终居中呢? 很简单把按钮放入Box中进行了. 代码如下: import javax.swing.Box; import javax.swing.JButton; impor ...
- 网站Bannr适应大小屏幕,图片始终居中不被压缩
网站banner一般都是2000px以上的宽度,为了让在小的屏幕上图片不被压缩并且是居中表现: 方法是让包裹图片全部的那个大容器始终正居中 <!-- banner --> <div ...
- CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
body { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; background-colo ...
随机推荐
- 【三剑客】awk运算符
1. 算术运算符:+,-,*,/,% [root@oldboy test]# awk 'BEGIN{a=50;b=20;print "(a+b)=",(a+b)}' (a+b)= ...
- Eclipse Mac OS 安装中文简体语言包
打开Eclipse软件,在导航Eclipse下拉菜单中点开 About Eclipse 查看版本 我的是 Eclipse IDE for Enterprise Java Developers. Ver ...
- 在服务器本地监控服务端口命令之ss
在服务器本地监控服务端口命令之ss 当服务器的socket连接数量变得非常大时,无论是使用netstat命令还是直接cat /proc/net/tcp,执行速度都会很慢.可能你不会有 切身的感受,但当 ...
- 10倍处理能力 阿里云推云上首个支持12层4K非编NAS产品
5月23日,阿里云在2017云栖大会·成都峰会上正式推出了云上首个支持广电级非编的文件存储产品------NAS Plus,作为阿里云文件存储NAS的升级款,NAS Plus提供高达200Gbps的吞 ...
- Android FrameWork学习(二)Android系统源码调试
通过上一篇 Android FrameWork学习(一)Android 7.0系统源码下载\编译 我们了解了如何进行系统源码的下载和编译工作. 为了更进一步地学习跟研究 Android 系统源码,今天 ...
- iOS自定义tabBar
在我们的项目中经常会自己自定义tabBar因为苹果自带的真的太丑了!也不满足我们的项目需求. 好 开始行动吧! 先上图看下我们最终实现的效果: 继承UItabBar自定义一个自己的tabBar .h# ...
- PHP版DES算法加密数据(3DES)另附openssl_encrypt版本
PHP版DES算法加密数据(3DES) 可与java的DES(DESede/CBC/PKCS5Padding)加密方式兼容 <?php /** * Created by PhpStorm. * ...
- Pattern Matching
字符串模式匹配,即子串的定位操作.就是判断主串S中是否存在给定的子串,如果存在,那么返回子串在S中的位置,否则返回0. 实现这种操作有两种算法: 朴素的模式匹配算法 设主串S长度为n,子串T长度为m. ...
- Jaba_Web--JDBC 删除记录操作模板
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- [bzoj2088]P3505 [POI2010]TEL-Teleportation
洛谷 bzoj 用了分层图的思想 题意 给一张图,要求你再尽可能的多连边,使得从1到2至少要经过5条边 没啥复杂的公式,讲解都在注释里 #include<cstdio> #include& ...