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窗口頂部總是出現(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導致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的動態(tài)創(chuàng)建表格的插件
工作快一年了,最近學習jquery，對jquery很感興趣。第一次寫博客，有不足之處還請各位拍磚。2011-04-04
jquery 層次選擇器siblings與nextAll的區(qū)別介紹
jquery 層次選擇器包括siblings與nextAll，本文為大家介紹下具體的使用方法，想學習的朋也可以參考下，希望對大家有所幫助2013-08-08
JS拖動選擇table里的單元格完整實例【基于jQuery】
這篇文章主要介紹了JS拖動選擇table里的單元格,結合完整實例形式分析了基于jQuery的table表格動態(tài)操作相關實現(xiàn)技巧,涉及事件響應及頁面元素屬性動態(tài)操作使用方法,需要的朋友可以參考下2019-05-05
jquery post方式傳遞多個參數(shù)值后臺以數(shù)組的方式進行接收
在用jquery的post方式傳遞多個值時，在后臺頁面可以用數(shù)組形式接收,很不錯吧，可以接收多個值啊，接下來介紹實現(xiàn)方法，感興趣的朋友可以了解下哦2013-01-01
下面小編就為大家?guī)硪黄狫Query validate 驗證一個單獨的表單元素實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了基于bootstrap3和jquery的分頁插件的相關資料,需要的朋友可以參考下2015-07-07
jQuery擁有可操作HTML元素和屬性的強大方法,下面這篇文章主要給大家介紹了關于jQuery獲取文本內容和原生JS的異同之處,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了基于jQuery實現(xiàn)左右圖片輪播，實現(xiàn)原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下2015-12-12
瀑布流就是像瀑布一樣的網(wǎng)站——豐富的網(wǎng)站內容，特別是絢美的圖片會讓你流連忘返。你在瀏覽網(wǎng)站的時候只需要輕輕滑動一下鼠標滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。瀑布流網(wǎng)站是新興的一種網(wǎng)站模式——她的典型代表是pinterest、美麗說、蘑菇街這類型的網(wǎng)站。2016-01-01