项目中使用的jquery版本是jquery-3.2.1，在使用layui弹出全屏iframe窗口时，iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏，代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>zqc</title>

  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

  <link rel="stylesheet" href="layui/css/layui.css">

</head>

<body>

<script src="layui/layui.js"></script>

<script>

//一般直接写在一个js文件中

layui.use(['layer', 'form'], function(){

  var layer = layui.layer

  ,form = layui.form;

//弹出即全屏

  var index = layer.open({

    type: 2,

    content: 'http://layim.layui.com',

    area: ['320px', '195px'],

    maxmin: true

  });

  layer.full(index);

});

</script>

</body>

</html>

就是因为头部引入了 jquery-3.2.1.min.js导致iframe窗口无法全屏，效果如下

解决办法：

方法一.使用layui内置的jquery

方法二.使用jquery1.X版本，我这里事更换的jquery-1.12.4，解决后代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>zqc</title>

  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

  <link rel="stylesheet" href="layui/css/layui.css">

</head>

<body>

<script src="layui/layui.js"></script>

<script>

//一般直接写在一个js文件中

layui.use(['layer', 'form'], function(){

  var layer = layui.layer

  ,form = layui.form;

//弹出即全屏

  var index = layer.open({

    type: 2,

    content: 'http://layim.layui.com',

    area: ['320px', '195px'],

    maxmin: true

  });

  layer.full(index);

});

</script>

</body>

</html>

jquery3和layui冲突导，致使用layui.layer.full弹出全屏iframe窗口时高度152px问题的更多相关文章

  1. JS中通过LayUI的layer.prompt弹出文本输入层，多个按钮回调获取输入值

    JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...

  2. layer重复弹出(layui弹层同时存在多个)的解决方法

    layer.open() 同时存在多个;解决 layui 弹层 layer 同时存在多个页面层(iframe)的问题 这个问题其实是疏忽了一些 基础参数(仔细看文档,仔细看文档,仔细看文档) 一.ty ...

  3. layui之弹出层--从父窗口传递数据到子窗口

    原文链接:https://blog.csdn.net/Code_shadow/article/details/80524633 var Index = layer.open({ title: &quo ...

  4. layui layer.open弹出框获取不了 input框的值

    layer.open({ title:'添加管理员', type: 1, content: $('.add_html').html(), btn:['添加', '取消'], btnAlign:'c', ...

  5. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  6. 解决 layui 弹出层（弹框）一闪而过就消失的问题 （转载）

    转载: 原文链接:https://blog.csdn.net/qq_20594019/article/details/83956532 本人遇到问题:使用layer.open()弹出页面层,出现弹框闪 ...

  7. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  8. 权限管理系统之LayUI实现页面增删改查和弹出层交互

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...

  9. Layui弹出层详解

    今天空了学习一下弹出层 还是一步步展示把 首先,layer可以独立使用,也可以通过Layui模块化使用.我个人一直是用的模块化的 所以下面素有的都是基于模块化的. 引入好相关文件就可以开始啦  今天放 ...

随机推荐

  1. 仿写confirm和alert弹框

    在工作中,我们常常会遇到原生的样式感觉比较丑,又和我们做的项目风格不搭.于是就有了仿写原生一些组件的念头,今天我就带大家仿写一下confirm和alert样式都可以自己修改. 有些的不好的地方请指出来 ...

  2. Spring Boot：实现MyBatis分页

    综合概述 想必大家都有过这样的体验,在使用Mybatis时,最头痛的就是写分页了,需要先写一个查询count的select语句,然后再写一个真正分页查询的语句,当查询条件多了之后,会发现真的不想花双倍 ...

  3. Java虚拟机详解（一）------简介

    本系列博客我们将以当前默认的主流虚拟机HotSpot 为例,详细介绍 Java虚拟机.以 JDK1.7 为主,同时介绍与 JDK1.8 的不同之处,通过Oracle官网以及各种文献进行整理,并加以验证 ...

  4. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  5. 【Idea】JUnit单元测试%MODULE_WORKING_DIR%' does not exist

    Idea执行单元测试时报错:上午9:35 Error running 'MobileMessageImplTest.java': Cannot start process, the working d ...

  6. CI框架注意

    1.在ci框架中,如果想继承自己写的控制器,从而不继承CI_Controller,可以在application/core中定义控制器,从而就可以在controllers中的控制器继承. 2.在ci框架 ...

  7. mybatis以及预编译如何防止SQL注入

    SQL注入是一种代码注入技术,用于攻击数据驱动的应用,恶意的SQL语句被插入到执行的实体字段中(例如,为了转储数据库内容给攻击者).[摘自] SQL injection - Wikipedia SQL ...

  8. PATA 1036. Boys vs Girls (25)

    https://www.patest.cn/contests/pat-a-practise/1036 #include <bits/stdc++.h> using namespace st ...

  9. 深度优先（DFS）和广度优先（BFS）

    深度优先(Depth-First-Search)和广度优先(Breadth-First-Search)是我们遍历图的两种方式,它们都属于穷举法,用来系统的遍历图中的所有顶点 关于如何再一个有向图/无向 ...

  10. HDU 4812：D Tree（树上点分治+逆元）

    题目链接 题意 给一棵树,每个点上有一个权值,问是否存在一条路径(不能是单个点)上的所有点相乘并对1e6+3取模等于k,输出路径的两个端点.如果存在多组答案,输出字典序小的点对. 思路 首先,(a * ...