快捷導(dǎo)航

jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時高度152px問題

更新時間：2019年05月12日 08:46:24 作者：ZQC

這篇文章主要介紹了解決jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時高度152px問題,需要的朋友可以參考下

項目中使用的jquery版本是jquery-3.2.1，在使用layui彈出全屏iframe窗口時，iframe窗口頂部總是出現(xiàn)一個152px高的滾動窗口無法實現(xiàn)真正全屏，代碼如下：

<!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導(dǎo)致iframe窗口無法全屏，效果如下

解決辦法：

方法一.使用layui內(nèi)置的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>

總結(jié)

以上所述是小編給大家介紹的jquery3和layui沖突導(dǎo)致使用layui.layer.full彈出全屏iframe窗口時高度152px問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: