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">
</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.js"></script><link rel="stylesheet" href="layui/css/layui.css">
</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>

 

转载于:https://www.cnblogs.com/a2b1/p/10850598.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364614.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ADF Faces。 立即的自定义客户端事件

在本文中&#xff0c;我将重点介绍ADF Faces Javascript API方法以从客户端触发自定义事件。 例如&#xff1a; function cliListener(actionEvent) {AdfCustomEvent.queue(actionEvent.getSource(), "servListener",null, true);}我们可以使用af&#xff1a;client…

Genymotion模拟器安装ARM架构编译应用失败解决方案

我们在安装一些应用到Genymotion模拟器会提示&#xff1a;adb: failed to install xx.apk: Failure [INSTALL_FAILED_NO_MATCHING_ABIS: Failed to extract native libraries, res-113] 原因是Genymotion采用的编译方式是x86&#xff0c;默认不支持ARM架构编译的应用&#xff0…

CentOS7.5 yum 安装与配置MySQL5.7.24

安装环境&#xff1a;CentOS7 64位 MINI版&#xff0c;安装MySQL5.7 1、配置YUM源 在MySQL官网中下载YUM源rpm安装包&#xff1a;https://dev.mysql.com/downloads/repo/yum/ 下面已经提供一个YUM源安装包,如果不需要特定版本可直接使用我提供的5.7.24版本 # 下载mysql源安装包…

5种改善服务器日志记录的技术

在最近的时间里&#xff0c;我们已经看到了许多工具可以帮助您理解日志。 诸如Scribe和LogStash之类的开源项目&#xff0c;诸如Splunk之类的本地工具以及诸如SumoLogic和PaperTrail之类的托管服务。 这些都可以帮助您将大量日志数据减少为更有意义的内容。 它们共有一个共同点…

java excel处理框架,Java三方—-excel框架之POI的使用一

Apache POI是Apache软件基金会的开放源码函式库&#xff0c;POI提供API给Java程序对Microsoft Office格式档案读和写的功能。pdf框架之IText的使用&#xff0c;参见我的博客&#xff1a;Java三方—->pdf框架之IText的使用。今天我们开始POI中Excel部分的学习。POI框架的简单…

关于background-*的一些属性

1、盒模型 盒模型从外到内一次为&#xff1a;margin-box、border-box、padding-box、content-box。 2、一些属性设置的相对位置 ⑴background-position的属性值&#xff08;top/right/bottom/left/center&#xff09;起始位置是相对于padding-box外边沿开始的&#xff0c;…

Outlook邮件的右键菜单中添加自定义按钮

customUI代码如下&#xff1a; <customUI xmlns"http://schemas.microsoft.com/office/2009/07/customui"><contextMenus><contextMenu idMso"ContextMenuMailItem"> <button id"button1" label"修改件名"…

vue 项目的I18n国际化之路

I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环&#xff0c;通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点&#xff1a;1、 语言语言本地化2、 文化颜色、习俗等3、 书写习惯日期格式、时区、数字格式、书写方向备…

使用IAM保护您的AWS基础架构

在开发新产品并发现合适的产品市场时&#xff0c;每个团队都需要快速行动。 尤其是初创公司&#xff0c;因为公司的整个未来都取决于快速找到为您的产品付款的人。 对于初创企业和其他团队来说&#xff0c; Amazon Web Services是令人难以置信的工具&#xff0c;可以快速构建其…

mysql文件软连接失败,解决打包软链接打包失败问题

一般情况下打包文件时&#xff0c;如果直接打包软连接会导致打包失败&#xff0c;即没有将要打包的内容打包进去&#xff0c;这里提供tar打包参数-h[rootlocalhost ~]# ll /etc/rc.locallrwxrwxrwx. 1 root root 13 Nov 24 00:45 /etc/rc.local -> rc.d/rc.local[rootlocalh…

快速掌握前端 专为Java程序员定制

Javascript 例子 修改页面内容 js 代码位置 <script>// js 代码 </script>引入 js 脚本 <script src"js脚本路径"></script>注意&#xff0c;到了框架之后&#xff0c;引入方式会有不同 1. 变量与数据类型 声明变量 1) let ⭐️ l…

Solidity中如何判断mapping中某个键是否为空呢?

Solidity中如何判断mapping中某个键是否为空呢&#xff1f; 一.比较标准的做法是建立一个专门和value相关的结构体&#xff0c;用一个布尔型变量来看是否这个key所对应的value被赋过值 代码如下&#xff1a; pragma solidity ^0.4.19;contract UserTest {struct User{string na…

mac安装了多版本php 卸载,mac 安装多版本PHP

前言相信大家在mac 安装PHP多版本的时候也遇到了很多坑# brew install php56# brew install php70这样安装的话肯定会报错的&#xff0c;因为brew存在软连接这个时候我们第一步&#xff1a;brew unlink php56 或者 brew unlink php70这个步骤是关闭掉PHP的软连接第二步&#x…

jQuery的on绑定click和直接绑定click区别

状况之外 在之前的公司并没有遇到这个问题&#xff0c;也就没有深究。直到自己换了现在的公司&#xff0c;刚来第二天就开始写别人写到一半的项目&#xff0c;很无奈&#xff0c;不是原生就是jquery&#xff0c;由于项目急&#xff0c;已经来不及切换框架重新布局&#xff0c;只…

Thymeleaf与Spring集成(第1部分)

1.引言 本文重点介绍如何将Thymeleaf与Spring框架集成。 这将使我们的MVC Web应用程序能够利用Thymeleaf HTML5模板引擎&#xff0c;而不会丢失任何Spring功能。 数据层使用Spring Data与mongoDB数据库进行交互。 该示例包含在酒店的单页Web应用程序中&#xff0c;从中我们可以…

oracle 老白,老白学编程 - Netdata学习 - numa

Numa 介绍NUMA,即Non-Uniform Memory Access Architecture&#xff0c;非统一内存访问架构。背景传统的SMP中&#xff0c; 所有处理器共享系统总线&#xff0c;当cpu数目增大时&#xff0c; 系统总现竞争就相应增加&#xff0c;会成为系统的瓶颈&#xff0c;所以SMP系统的CPU数…

如何安装 Angular CLI 并且检查 CLI 的版本

想在系统中安装 Angular CLI &#xff0c;如何进行安装并且如何检查 CLI 的版本&#xff1f; 可以使用命令&#xff1a; npm install -g angular/cli 进行安装。 使用命令 ng version 来查看 Angular 的 CLI 的版本 转载于:https://www.cnblogs.com/huyuchengus/p/10879166.htm…

2018-2019-2 网络对抗技术 20165329 Exp 8 Web基础

2018-2019-2 网络对抗技术 20165329 Exp 8 Web基础 原理与实践说明 实践内容概述基础问题回答实践过程记录 1.Web前端&#xff1a;HTML2.Web前端&#xff1a;javascipt3.Web后端&#xff1a;MySQL基础4.Web后端&#xff1a;编写PHP网页5.最简单的SQL注入&#xff0c;XSS攻击测试…

为JVM分配内存:一个案例研究

这篇文章是关于最近的性能调整练习的。 与往常一样&#xff0c;这些开始于关于症状的模糊表述。 这次&#xff0c;魔鬼采取了“应用程序速度慢&#xff0c;我们无法访问源代码的形式。 我们有什么改善情况的选择”。 对该应用程序进行仔细研究后发现&#xff0c;它由捆绑在一起…

Thymeleaf与Spring集成(第2部分)

1.简介 这是Thymeleaf与Spring教程集成的第二部分。 您可以在此处阅读第一部分&#xff0c;在那里您将学习如何配置该项目。 如本教程第一部分开头所述&#xff0c;Web应用程序将发送两种类型的请求&#xff1a; 插入新访客&#xff1a;将同步请求发送到服务器以添加新访客。…