jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题


Posted in jQuery onMay 12, 2019

项目中使用的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" rel="external nofollow" rel="external nofollow" >
</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窗口无法全屏,效果如下

jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

解决办法:

方法一.使用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"></script>
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
</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问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
jquery登录的异步验证操作示例
May 09 #jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
You might like
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python输出各行命令详解
2018/02/01 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python多线程获取返回值代码实例
2020/02/17 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
公司委托书格式
2014/08/01 职场文书
企业趣味活动方案
2014/08/21 职场文书
治庸问责心得体会
2014/09/12 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
中学生自我评价2015
2015/03/03 职场文书
安全教育观后感
2015/06/17 职场文书
高三数学教学反思
2016/02/18 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android