项目中使用的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. Redis EXISTS命令耗时过长case排查

    一.背景 redis慢日志分析平台上线后,随便看了一下,发现onestore使用的缓存集群,存在大量的EXISTS命令慢查询的情况: 平均每个EXISTS命令需要13ms,最大耗时近20ms.这个结果 ...

  2. 缩放手势 ScaleGestureDetector 源码解析，这一篇就够了

    其实在我们日常的编程中,对于缩放手势的使用并不是很经常,这一手势主要是用在图片浏览方面,比如下方例子.但是(敲重点),作为 Android 入门的基础来说,学习 ScaleGestureDetecto ...

  3. Zookeeper详解-基础（二）

    在深入了解ZooKeeper的运作之前,让我们来看看ZooKeeper的基本概念.我们将在本章中讨论以下主题: Architecture(架构) Hierarchical namespace(层次命名 ...

  4. OVS实现VXLAN隔离

    一.实验环境 1.准备3个CentOS7 mini版本的虚拟机,每个主机3个网卡.如图: 图中OVS-1.OVS-2.OVS-3分别为三台CentOS7 mini版虚拟机,分别配备3个虚拟网卡.如图中 ...

  5. javaWeb 概念介绍

    一.javaWeb 1.概念:利用java语言进行基于互联网的开发 2.软件架构 (1)C/S   Client/Server  客户端/服务器端 在用户本地有一个客户端程序,在远程有一个服务器程序 ...

  6. 如何让apache支持.htaccess 解决Internal Server Error The server …错误

    如何让apache支持.htaccess 解决Internal Server Error The server …错误 文章来源:小灰博客| 时间:2013-12-25 12:17:08| 作者:Le ...

  7. 牛逼哄哄的Qt库

    目录 一.有价值 - 好的网站 - 好的文章 二.Qt开源库-工具 - QtXlsx--excel读写库 三.Qt开源库-控件 - libqxt编译 - Qwt - QCustomPlot - 其他 ...

  8. 一套简单的web即时通讯——第一版

    前言 我们之前已经实现了 WebSocket+Java 私聊.群聊实例,后面我们模仿layer弹窗,封装了一个自己的web弹窗 自定义web弹窗/层:简易风格的msg与可拖放的dialog,生成博客园 ...

  9. Codeforces Gym100502A：Amanda Lounges（DFS染色）

    http://codeforces.com/gym/100502/attachments 题意:有n个地点,m条边,每条边有一个边权,0代表两个顶点都染成白色,2代表两个顶点都染成黑色,1代表两个顶点 ...

  10. c++学习书籍推荐《面向对象程序设计:C++语言描述(原书第2版)》下载

    百度云及其他网盘下载地址:点我 <面向对象程序设计:C++语言描述(原书第2版)>内容丰富,结构合理,写作风格严谨,深刻地论述了c++语言的面向对象编程的各种技术,主要内容包括:面向对象编 ...