项目中使用的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. Java中常用的url签名防篡改方法

    实现方式:Md5(url+key) 的方式进行的. 1.key可以是任意的字符串,然后“客户端”和“服务器端”各自保留一份,千万不能外泄. 2.请求的URL 例如:  name=lxl&age ...

  2. javascript“命名空间”的费曼输出[原创]

    Javascript由于没有命名空间的概念,所以好多的框架或库就用了某些“命名空间”的技巧.在学习作为函数的命名空间时,我翻阅了好多的书本和blog,很多的概念和说明都是要么过于烦杂或过于简单.现在由 ...

  3. thinkphp5ajax分頁&&搜索後分頁

    //控制器層 //分頁 public function list_january_table(){ //設置當前頁 $page = input("post.page") ? inp ...

  4. 我与微软的不解之缘 - 我的Insider Dev Tour 2019讲师之旅

    标题:我与微软的不解之缘 - 我的Insider Dev Tour 2019讲师之旅 作者:Lamond Lu 大家好,我是陆楠,来自北京盛安德青岛分公司,今年非常有幸作为讲师参加了微软Insider ...

  5. Mac上使用ssh连接服务器title显示服务器的ip

    Mac上使用ssh连接服务器title显示服务器的ip 使用Mac开发时,管理的服务器过多时,会搞混乱.可能有时啪啪啪一顿操作,最后发现操作错了机器. 解决方案 在远程服务器上,编辑vim /etc/ ...

  6. leadcode的Hot100系列--104. 二叉树的最大深度

    依然使用递归思想. 思路: 1.树的深度 = max (左子树深度,右子树深度)+ 1 . ------> 这里的加1是表示自己节点深度为1. 2.如果当前节点为null,则说明它的左右子树深度 ...

  7. 机器学习读书笔记(一)k-近邻算法

    一.机器学习是什么 机器学习的英文名称叫Machine Learning,简称ML,该领域主要研究的是如何使计算机能够模拟人类的学习行为从而获得新的知识和技能,并且重新组织已学习到的知识和和技能,使之 ...

  8. C++一些知识的整理

    1. C 和 C++ 区别 C++支持多种编程范式:面向对象编程.泛型编程.过程化编程.支持类.封装.重载等特性. c和c++的头文件不同. 输入输出不同. 变量的声明定义不同:c语言:变量要放在语句 ...

  9. C# 获取计算机相关信息

    整理了一个关于计算机相关系统的资料 需要引入命名空间: 1. 在'解决方案资源管理器' 窗口中->右击项目-> '添加' -> '引用' 弹出引用管理器 2. 在引用处理器中,程序集 ...

  10. 1. UML软件设计模型图整理

    UML建模 程序设计ER图 UML建模(一)---UserCase用例图 UML建模(二)--流程图 (程序框图) UML建模(三)--部署图 UML建模(四)--类图 UML用例图.流程图 (五)