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层无效

更多web开发知识,请查阅 HTML中文网 !!

以上就是layui弹窗如何禁止拉伸?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Layui 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏