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问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
LazyForm jQuery plugin 定制您的CheckBox Radio和Select ，需要的朋友可以参考下。2009-10-10
工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。2011-04-04
jquery 层次选择器siblings与nextAll的区别介绍
jquery 层次选择器包括siblings与nextAll，本文为大家介绍下具体的使用方法，想学习的朋也可以参考下，希望对大家有所帮助2013-08-08
JS拖动选择table里的单元格完整实例【基于jQuery】
这篇文章主要介绍了JS拖动选择table里的单元格,结合完整实例形式分析了基于jQuery的table表格动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下2019-05-05
jquery post方式传递多个参数值后台以数组的方式进行接收
在用jquery的post方式传递多个值时，在后台页面可以用数组形式接收,很不错吧，可以接收多个值啊，接下来介绍实现方法，感兴趣的朋友可以了解下哦2013-01-01
下面小编就为大家带来一篇JQuery validate 验证一个单独的表单元素实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了基于bootstrap3和jquery的分页插件的相关资料,需要的朋友可以参考下2015-07-07
jQuery拥有可操作HTML元素和属性的强大方法,下面这篇文章主要给大家介绍了关于jQuery获取文本内容和原生JS的异同之处,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了基于jQuery实现左右图片轮播，实现原理通用可通用，希望能和大家分享一下思路，感兴趣的小伙伴们可以参考一下2015-12-12
瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。2016-01-01
最新评论