layui弹窗如何禁止拉伸?

弹层组件文档 - layui.layer

ayer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。目前,layer已成为国内最多人使用的 Web 弹层组件,GitHub 自然Stars5000+,官网累计下载量达50w+,大概有30万不同规模的 Web 平台使用过 layer。

上述介绍引自layui官网介绍

今天需要用到layer弹出一个iframe窗,直接从layer官网上copy过来这么一段

//iframe窗

layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '很多时候,我们想最大化看,比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '//fly.layui.com/'
});
}
});

发现在这一段代码设置之后,弹出的iframe中有一些问题:

1、可以自由拖拽在页面内移动;

2、我在iframe中展示页面的文字颜色出现问题;

3、还有iframe页面的大小不理想;

4、iframe窗口默认情况会允许缩放延伸。

好吧,我也没指望引入的例子刚好满足我,那么久找方法去修改呗,网上搜索到的感觉还是有点乱,感觉没有专门讲这个的,不会很细,所以我的问题网上搜索,没解决,这也是我写下这篇博客的原因。

要知道无论你用什么插件或者框架,最好的解决方法就是看文档!!!

是因为我之前看的旧的layer文档,真的是,大家引以为戒,看最新的文档最好是。

来解决问题开始:

1、move - 触发拖动的元素

类型:String/DOM/Boolean,默认:'.layui-layer-title'

默认是触发标题区域拖拽。如果你想单独定义,指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽;

2、字体颜色的话我直接加了个class,覆盖上去;

3、area - 宽高

类型:String/Array,默认:'auto'

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']。

4、resize - 是否允许拉伸

类型:Boolean,默认:true

默认情况下,你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能,设置 resize:false即可。该参数对loading、tips层无效


推荐文章
layui同页面如何显示多种时间样式?

Layui时间模块同页面显示多种时间样式layui时间模块主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器等五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。代码如下:

浅谈layui中table的sort排序

今天来谈谈tablesort的那点事。预告一下,目的是做到前台排序还有服务器排序区分开,目前的table的分页实际是比较“乱”的,相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到

layui登录后token问题详解

layui是一个非常简单且实用的后台管理系统搭建框架,里面的插件丰富使用简单,只需要在原有基础上进行修改即可,但是在数据处理方面略显薄弱,内置的jquery在实际过程中略显不足,若是能添加内置的mvc

layui怎么固定表格的表头?

步骤:1、设置两个table,第一个table有thead没有tbody,第二个table有tbody没有table;2、第二个table需要一个div包住,并设置宽高,可用绝对布局3、tr下的th和

layui是什么软件?

layui不是软件,它是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到AP

浅谈layui上传文件和数据表格中的一些问题

layui是一款我比较喜欢的框架,它的界面风格和颜色搭配都是让人比较舒服的,所以我非常喜欢使用layui。接下来就是在工作中使用layui遇到了一些比较细节的问题:第一:layui上传文件的问题,第二

如何用layui实现图片上传?

layui上传功能的实现:一、前往官网下载layui的框架打开html文件,引用其中的layui.css和layui.js二、调用前端的html代码,设置id值。 上传图片   layui

layui之关于表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

layui有什么功能?

layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细

详解layui后台框架的搭建

layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到

layui怎么隐藏表格行?

layui数据表格隐藏列在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test'

layui如何获取table某一行的值?

layui中可以使用table.checkStatus('ID')方法获取table某一行的值,其中ID为基础参数。【自动化渲染】……【方法渲染】table.render({//其它参数省略 id:'

layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

浅谈layui表单中的inline和block

layui表单中的inline和block:block:block元素会独自占一行,多个block元素各自新起一行,默认情况下,block元素宽度自动填充其父元素宽度 单行输入框 验证必填项

layui中的layer怎么进行宽高设置?

layui中的layer模块可以使用area设置宽高。类型:String/Array,默认:'auto'在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area:'500px',

浅谈layui文件上传、预览及修改

单文件上传1、HTML 上传客服二维码 * 开始上传 温馨提示:每次最多上传一张图片,单张图片的大小不超过2MB 2、js部分varform=layui.for

layui和layer的区别是什么?

layui是之前layerlaydate等独立组件的超集合;layui是一个完整的前端框架,和Bootstrap是同一类事务;引入了layui之后layer就不用单独引入了。layer至今仍作为lay

layui数据表格删除当前行的方法

数据表格如下:t2={ elem:'#test2', data:tableData2, page:false, width:$(parent.window).width()-50, cols:[[ {

浅谈layui标签输入框inputTags

layui标签输入框inputTags样式:目录结构:页面代码: inputTags layui.config({ base:'js/