最近有个项目是用 Layui 搭的,但是在layer的使用上遇到了问题。

简单的说,在父页面声明layer,在子页面中的子页面用window.parent调用那个父页面的layer。

讲道理应该是和iframe不相关的,但是却遇到了layer并没有垂直居中的情况。

我在看了layer算的高度之后,大胆猜测:layer的位置计算是有问题的。

它的计算用的并不是window.innerHeight,而是document.body.offectHeight !


所以我们在使用时得手动修正它的位置。

layer.load(0,{
offset: (window.parent.parent.innerHeight / 2) + 'px'
});

当然,如果你没有遇到这个问题,就忽略吧。

layui :iframe 与 layer 的位置问题的更多相关文章

  1. layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ ...

  2. 使用layui iframe弹层,各弹层之前的传值问题

    最近做一个后台管理系统,用到的layui,主要是使用它的弹层,但是各个弹层之前的传值经常容易搞晕,写个个博客记录一下,方便自己,也方便别人, 首先我的页面已经嵌套了好几个iframe页面了,嵌套了三个 ...

  3. layui里面的layer模块弹窗,强制居中的方法!!!

    每次调用layer弹窗做动态展示的时候,只要内容不固定或者需要二次渲染 比如layui.form.render()进行渲染的时候 由于弹窗已经出来了,只是content部分的结构改变了宽度或者高度,l ...

  4. 记一次解决layui 的bug - layer.open 与 layui渲染问题

    场景是这样的,通过layer打开一个弹窗,里面放置一个表单,表单是用layui来渲染的. 当弹窗完成之后,我需要渲染表单中的一些内容.譬如laydate. layer.open({ type: 1, ...

  5. 解决Layui数据表格中checkbox位置不居中

    1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示  2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 < ...

  6. Layui Iframe页面间 方法的相互调用

    就是普通的iframe之间方法的调用,只是注意一下src就像 var childWindow = $(window.parent.document).find("iframe[src='/A ...

  7. layui.layer独立组件--解释

    网站文档-链接:http://www.layui.com/doc/modules/layer.html layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护 ...

  8. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  9. 弹出层小插件之(二) layer&layui

    其实layer或者layui相对于上次所说的 sweetalert来说不仅仅有弹出层,它有很多的功能,这也大大的提高了我们的开发效率,根据我们项目的实际需要的效果进行选择.下面介绍下Layer的用法吧 ...

随机推荐

  1. platform驱动架构初探

    platform总线是Linux2.6引入的虚拟总线,这类总线没有对应的硬件结构.与之相反,USB总线和PCI总线在内核中是有对应的bus(USB-bus和PCI-bus)的.为了统一管理CPU这些既 ...

  2. 登录CentOS用户很慢/usr/bin/xauth: timeout in locking authority file /home/***/.Xauthority

    当使用非root用户登录CentOS时,发现很慢,而且弹出以下信息: /usr/bin/xauth:  timeout in locking authority file /home/***/.Xau ...

  3. 【解读】TCP协议

    本文内容如下:      1)TCP协议概念      2)TCP头部结构和字段介绍      3)TCP流量控制            滑动窗口      4)TCP拥塞控制           慢 ...

  4. redis基础二----操作List类型

    1.lpush的使用方法 2.rpsuh的使用方法 3.删除元素 lrem中2值的是删除2个集合中的“b”元素 4. 通过上面的分析,redis中的list比较类型java的qunue队列

  5. 利用xampp集成环境搭建pikachu靶场及部分问题解决

    xampp的环境部署 1.本地服务器的搭建 首先要到官网下载xampp https://www.apachefriends.org/zh_cn/index.html 有各个不同的系统版本,这里我们选择 ...

  6. (私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例)

    (私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/1L54VuFwCdKVnQGVc8vD1TQnwmj java手册 Ja ...

  7. node.js/npm升级正确操作(windows和linux均有)

    原文地址:https://www.wjcms.net/archives/nodejsnpm升级正确操作windows和linux均有 今天我们总结一下node.js以及npm升级的正确操作方法. 小编 ...

  8. web页面的重构和回流【转载】

    在了解什么是重构和回流之前,我们应该先看看浏览器是怎么渲染的? 浏览器的渲染过程: 1.处理HTML脚本,生成DOM树(DOM树里包含所有的HTML标签,包括display:none和js动态添加的元 ...

  9. POJ 1852 Ants(贪心)

    POJ 1852 Ants 题目大意 有n只蚂蚁在木棍上爬行,每只蚂蚁的速度都是每秒1单位长度,现在给你所有蚂蚁初始的位置(蚂蚁运动方向未定),蚂蚁相遇会掉头反向运动,让你求出所有蚂蚁都·掉下木棍的最 ...

  10. 关于Dfs(1);

    问: 我们大部分在根不定的情况下喜欢Dfs(1):到底要不要这样呢? 解释: 首先Dfs(1):是没有任何问题的,毕竟根不定,随便选一个肯定有1,这是没问题的,但是,很多数据也是这么造的,比如在1处卡 ...