前话:今天用 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. 【Linux常见问题】CentOS 7 root用户密码忘记,找回密码方法

    1.开机按esc 2.选择CentOS Linux (3.10.0-693.......)     按 e 键: 3.光标移动到 linux 16 开头的行,找到 ro 改为 rw init=sysr ...

  2. vscode快捷替换json格式

    i=json from=AUTO to=AUTO smartresult=dict client=fanyideskweb salt=1537359261311 sign=06b7d1398ebdc6 ...

  3. C语言编程入门题目--No.13

    题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数 本身.例如:153是一个"水仙花数",因为153= ...

  4. HTML(表格标签)

    <table> 标签 表格由 <table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义) ...

  5. 题目分享F 二代目

    题意:T个点R种双向边,P种单向边,求点S到每个点的最短距离 分析:(这再看不出来是spfa就该**了) 首先,这题能否用spfa就看他是否有负环呗,显然,双向边的权值非负,单向边还有个啥政策,总之显 ...

  6. Redux在项目中的文件结构

    React + Redux   今天我们来唠唠在React一般项目中,使用Redux进行状态管理的时候,相对的如何存放reducer.action.api之类文件的结构与使用时机吧.本章默认看官们已经 ...

  7. Kubernetes实战总结

    >>> 目录 <<< 一.概述二.核心组件三.基本概念四.系统架构五.镜像制作六.服务编排七.持续部署八.故障排查 >>> 正文 << ...

  8. java读源码 之 queue源码分析(PriorityQueue,附图)

    今天要介绍的是基础容器类(为了与并发容器类区分开来而命名的名字)中的另一个成员--PriorityQueue,它的大名叫做优先级队列,想必即使没有用过也该有所耳闻吧,什么?没..没听过?emmm... ...

  9. 闲来无事做个C#小项目——1

    2020-05-10 12:25:47 项目背景就是最近和一些朋友在玩一个游戏,游戏中有一个囤货的东西,就是买进卖出的,然后为了方便计算,所以就先写一个简单的计算器用来算账, 这是界面图(最初形态,没 ...

  10. pyhanlp安装教程

    1.hanlp简介 HanLP是由一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环境中的应用.HanLP具备功能完善.性能高效.架构清晰.语料时新.可自定义的特点. Hanlp具有 ...