最近有个项目是用 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. 跨云厂商部署 k3s 集群

    原文链接:https://fuckcloudnative.io/posts/deploy-k3s-cross-public-cloud/ 最近一两年各大云服务商都出了各种福利活动,很多小伙伴薅了一波又 ...

  2. JavaWeb的登陆与注销功能

    JavaWeb 登录与注销 大致流程 一般我们在Web应用中 登录页面一般是以 login.jsp的首页 大致流程如下: 当我们在前台写入用户名和密码之后,点击登录按钮 会将表单提交给一个LoginS ...

  3. [ C++ ] 勿在浮沙筑高台 —— 内存管理(9~16p)primitives(下)

    per-class allocator 2 tips: operator new重载 不会被派生类实际使用,因为父类大小内存的分配交给子类去调用明显是不正确的.实际上会被转交至 : : operato ...

  4. 【SpringMVC】

    前言

  5. openstack Rocky 社区版部署1.4 安装数据库

    在控制节点安装mariadb,也可以单独服务器安装数据库,假如多个控制节点就在第一台安装数据库,计算节点不需要安装. 1 安装mariadb相关安装包. yum install mariadb mar ...

  6. xeus-clickhouse: Jupyter 的 ClickHouse 内核

    在科学计算领域,Jupyter 是一个使用非常广泛的集成开发环境,它支持多种主流的编程语言比如 Python, C++, R 或者 Julia.同时,数据科学最重要的还是数据,而 SQL 是操作数据最 ...

  7. js语法基础入门(1)

    1.基础入门 1.1.hello world 1.1.1.JavaScript是什么? JavaScript是一门跨平台.面向对象的轻量级脚本语言,在web开发中被广泛应用 1.1.2.JavaScr ...

  8. oracle创建序列,并插入记录

    Oracle序列创建和使用创建序列 语法 CREATE SEQUENCE 序列名 [相关参数] 参数说明 INCREMENT BY  : 序列变化的步进,负值表示递减.(默认1) START WITH ...

  9. win10提示“无法设置移动热点 请打开WLAN”的解决方法

    一位用户在使用Win10创意者操作系统过程中,遇到了无法开启移动热点的情况,开关呈灰色状态,而且提示:无法设置移动热点 请打开WLAN,该如何解决呢?该用户表示Wlan一直开着呀,感觉非常奇怪.接下来 ...

  10. python unittest自动测试框架

    编写函数或者类时进行测试,确保代码正常工作 python  unittest 模块提供了代码测试工具.按照定义测试包括两部分:管理测试依赖库的代码(称为‘固件’)和测试本身. 单元测试用于核实函数的某 ...