弹层组件文档 - layui.layer
layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。目前, layer已成为国内最多人使用的 Web 弹层组件, GitHub 自然Stars 5000+,官网累计下载量达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、
类型: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层无效
大家有其他的问题的话可以多看看文档layer文档