最近有个项目是用 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. 键盘侠Linux干货| ELK(Elasticsearch + Logstash + Kibana) 搭建教程

    前言 Elasticsearch + Logstash + Kibana(ELK)是一套开源的日志管理方案,分析网站的访问情况时我们一般会借助 Google / 百度 / CNZZ 等方式嵌入 JS ...

  2. 入门大数据---Hive视图和索引

    一.视图 1.1 简介 Hive 中的视图和 RDBMS 中视图的概念一致,都是一组数据的逻辑表示,本质上就是一条 SELECT 语句的结果集.视图是纯粹的逻辑对象,没有关联的存储 (Hive 3.0 ...

  3. git push和pull如何解决冲突!!!精品

    多人合作完成项目时,git push 和 pull经常会发生冲突,根本原因就是远程的东西和本地的东西长的不一样,以下步骤能完美解决所有冲突!(先查看一下分支(git branch),确认没错再进行下面 ...

  4. C++中i++和++i的区别

    目录 效果上的区别 性能上的区别 分析汇编代码 进行性能实验 二者的选择 效果上的区别 i++是对变量i递增,但返回原值,++i是对变量i进行递增,并返回终值. 可以用以下代码加以验证: int i ...

  5. Nginx平滑升级详细步骤-113p.cn

    认识平滑升级 有时候我们需要对Nginx版本进行升级以满足运维人员对其功能的需求,例如添加xxx模块,需要xxx功能,而此时Nginx又在跑着业务无法停掉,这时我们就只能平滑升级了. 平滑升级原理 N ...

  6. 廖雪峰Python教学课后作业---datetime

    # -*- coding: utf-8 -*- import re from datetime import datetime, timezone, timedelta def to_timestam ...

  7. 「JLOI2015」城池攻占 可并堆

    传送门 分析 如果直接暴力枚举的话肯定会超时 我们可以从下往上遍历,维护一个小根堆 每次到达一个节点把战败的骑士扔出去 剩下的再继续向上合并,注意要维护一下其实的战斗力 可以像线段树那样用一个lazy ...

  8. JS数组与对象赋值问题

    在W3C的在线编程中经过测试发现以下问题: 当一个数组内部元素为对象时,给数组赋值应该先给对象赋值,然后把该对象push到数组中. 如下所示: 在控制台打印之后的数据格式为下图所示: 如果在给数组赋值 ...

  9. APP开发---Windows查看端口是否被占用

    前言:在后台设计的过程中,当你把后台的代码编辑好之后经常会发现,上传jar包之后,却出现了错误,错误结果显示端口被占用,下面就是如何查看Windows端口是否被占用的方法总结 ------------ ...

  10. vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...