项目中使用的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. 修改zookeeper jvm参数

    在zkServer.sh中,增加以下参数: start)    echo  -n "Starting zookeeper ... "    if [ -f $ZOOPIDFILE ...

  2. SYN6109型 NTP网络子钟

    SYN6109型 NTP网络子钟 产品概述 SYN6109型NTP网络子钟是由西安同步电子科技有限公司精心设计.自行研发生产的一套通过网口与母钟连接的子钟,接收母钟发送来的时间信息(信息内容:年.月. ...

  3. 深入理解ES6 - var-let-const

    知识点 var 声明变量: 1.存在变量提升,实际上var无论在哪里声明,都会被当做当前的作用域顶部声明变量. 2.可以重复声明,后声明的变量会覆盖前声明的变量. let 声明变量: 1.不存在变量提 ...

  4. Hexo+NexT（一）：在Windows下安装Hexo+NexT及搭建博客

    阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到 ...

  5. Django 强大的ORM之增删改查

    Django orm         Django——orm进阶 测试Django中的orm 表结构: models.py class User(models.Model): name = model ...

  6. Go语言之从0到1实现一个简单的Redis连接池

    Go语言之从0到1实现一个简单的Redis连接池 前言 最近学习了一些Go语言开发相关内容,但是苦于手头没有可以练手的项目,学的时候理解不清楚,学过容易忘. 结合之前组内分享时学到的Redis相关知识 ...

  7. Android之控件学习

    文本域,类似于HTML里的textarea <EditText android:id="@+id/edit_text" android:layout_width=" ...

  8. 长春理工大学第十四届程序设计竞赛（重现赛）I

    I.Fate Grand Order 题目链接:https://ac.nowcoder.com/acm/contest/912/I 题目: Fate Grand Order是型月社发行的角色扮演类手机 ...

  9. java 及 Jquery中的深复制 浅复制

    发现问题:最近 遇到由于复制对象之后,改变复制后的新变量,原先被复制的对象居然会跟着变. EX:java中: //holidayConfig.getEnd_time()会随着sTime的改变而改变 s ...

  10. c# 图文添加文字斜水印

    项目中有个添加水印的需求,需要给图片铺满斜水印. 网上搜了半天全是添加在图片上.下.左.右的案例. 于是按照网上的某一段案例自己修改了一些代码. Bitmap bitmap = new Bitmap( ...