jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
更新时间：2019年05月12日 08:46:24 作者：ZQC
这篇文章主要介绍了解决jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题,需要的朋友可以参考下
项目中使用的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窗口无法全屏，效果如下
解决办法：
方法一.使用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 slider Content(左右控制移动)实现代码，大家可以参考下。2009-09-09
jQuery EasyUI Layout实现tabs标签的实例
这篇文章主要介绍了jQuery EasyUI Layout实现tabs标签的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了jquery拖拽自动排序插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
jQuery.ajax 用户登录验证代码，需要的朋友可以参考下。2010-10-10
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
这篇文章主要为大家详细介绍了jQuery常用插件jquery.kxbdmarquee.js使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
关键词匹配搜索想必大家一定会想到百度，下面有个不错的示例，感兴趣的朋友可以参考下2013-09-09
jquery mobile 实现自定义confirm确认框效果的简单实例
下面小编就为大家带来一篇jquery mobile 实现自定义confirm确认框效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文为大家介绍下父页面显示遮罩层，弹出半透明状态的dialog。dialog即弹出的子页面,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了jQuery排序插件tableSorter的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了jQuery Masonry瀑布流布局神器的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论