最近有个项目是用 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. Scanner扫描器的使用

    Scanner:扫描器,可以通过Scanner类扫描用户在控制台录入的数据. 1.导包 //导包快捷键Alt+Enter 2.创建键盘录入对象 //键盘录入对象的名称为 “sc” 3.接收数据 //将 ...

  2. 第七模块 :微服务监控告警Prometheus架构和实践

    119.监控模式分类~1.mp4 logging:日志监控,Logging 的特点是,它描述一些离散的(不连续的)事件. 例如:应用通过一个滚动的文件输出 Debug 或 Error 信息,并通过日志 ...

  3. 并发编程,python的进程,与线程

    并发编程 操作系统发展史 基于单核研究 多道技术 1.空间上的复用 多个程序公用一套计算机硬件 2.时间上的复用 切换+保存状态 例子:洗衣 烧水 做饭 切换 1.程序遇到IO操作系统会立刻剥夺走CP ...

  4. ThinkPHP5使用PHPExcel实现数据导出功能

    1.将PHPExcel类库文件夹放入extend目录下 2.导出功能实现 public function download(){ if(request()->isPost()){ $val = ...

  5. 【树形dp】Farmcraft

    题目 In a village called Byteville, there are houses connected with N-1 roads. For each pair of houses ...

  6. 编译Spring5.2.0源码

    下载 spring-framework-5.2.0.RELEASE.zip https://github.com/spring-projects/spring-framework/releases 下 ...

  7. 设置CMD窗口为UTF-8编码

    Windows下的CMD窗口默认是采用非UTF-8编码的,有时候运行一些UTF-8编写的批处理文件在控制台中的输出就是乱码, CHCP是MD DOS中的命令,用来显示或设置活动代码页编号的.用法是:  ...

  8. 泛型<T>,是你肿莫了,还是我错了...

    委托自定义数组排序 项目一共三个文件如下. CSort.cs using System; using System.Collections.Generic; using System.Linq; us ...

  9. zookeeper搭建和kafka搭建

    zookeeper和kafka都是基于java的 zookeeper 1.安装jdk 官网下载rpm文件 rpm -ivh 文件.rpm 2.下载zookeeper tar -xv 压缩文件 -C 目 ...

  10. Java实现第十一届蓝桥杯JavaB组 省赛真题

    试题 A: 指数计算 本题总分:5 分 [问题描述] 7 月 1 日是建党日,从 1921 年到 2020 年, 已经带领中国人民 走过了 99 年. 请计算:7 ^ 2020 mod 1921,其中 ...