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. 内置函数 awk的内置函数有算术.字符串.时间.位操作和其它杂项的函数. 1.1 算术函数 atan2(y,x) 返回弧度的反正切(y/x) cos(expr) 返回expr的余弦(以弧度形 ...
- OpenWrt-19.07.2 For HC5861(极路由3) /HiWiFi/Gee最新固件,极路由3刷openwrt
OpenWrt For HiWiFi(HC5861) 自编译精减固件,极路由3自用固件 HC5861-uboot.bin v19.07.2 下载 支持 NTFS 读写 支持 Wi-Fi 5G 驱动 默 ...
- OSChina 周一乱弹 —— 为什么人类和人工智能定要一战
2019独角兽企业重金招聘Python工程师标准>>> Osc乱弹歌单(2018)请戳(这里) [今日歌曲] @小小编辑:推荐歌曲,又失恋了 - 花粥 <又失恋了>- 花 ...
- 全面解析Java语言 Java技能优化集锦
通用篇 "通用篇"讨论的问题适合于大多数Java应用. 不用new关键词创建类的实例 用new关键词创建类的实例时,构造函数链中的所有构造函数都会被自动调用.但如果一个对象实现了C ...
- 【COCOS2DX-LUA 脚本开发之四】使用tolua++编译pk创建自定义类
此篇基本[COCOS2DX(2.X)_LUA开发之三]在LUA中使用自定义精灵(LUA脚本与自创建类之间的访问)及LUA基础讲解 在Lua第三篇中介绍了,如何在cocos2dx中使用Lua创建自定义类 ...
- python 多进程处理 multiprocessing模块
前提: 有时候一个用一个进程处理一个列表中的每个元素(每个元素要传递到一个函数中进行处理),这个时候就要用多进程处理 1 现场案例: 我有一个[ip1,ip2,ip3,.......]这样的列表,我要 ...
- 解决vue渲染时闪烁{{}}的问题
原文转自: 点我 Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题在写APP社区页面的时候在一些地方用了v-show,在刷新页面的时候就发现即便在逻辑判断为false某些元素不该显示时也 ...
- JAVA_WEB--jsp概述
JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动态网页技术 ...
- App 抓包代理设置
1.设置 Fiddler 打开 Fiddler,Tools --> Fiddler Options --> HTPS (配置完后记得要重启 Fiddler) 选中 "D ...
- unittest(封装用例)
from selenium import webdriver from time import sleep import unittest #导入unittest库 import HTMLTestRu ...