layui弹出层如何使用-创新互联
小编给大家分享一下layui弹出层如何使用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联公司长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为单县企业提供专业的网站设计、成都网站制作,单县网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。layui弹出层的使用方法:首先引入jQuery1.8以上的任意版本;然后引入laery.js;最后通过“function show(){var a = layer.open({...});}”方式使用laery.open弹出层即可。
layer 在 layui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块
1、获取laery,你需要去官网下载laery.js 地址--http://layer.layui.com/
2、引入laery.js 在此之前你必须要先引入jQuery1.8以上的任意版本
3、使用laery.open();
function show(){ var a = layer.open({ type: 2, area: ['80%','450px'], title: '我是标题', shadeClose: true, content: ['layer_model.html','no'] }); }
基础参数
1. type 类型
type: 1, // 0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
2. title 标题
title:"我是标题", //若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'] 数组第二项可以写任意css样式; //如果你不想显示标题栏,你可以 title: false
3. content 内容
3.1.如果是页面层
layer.open({ type: 1, content: '传入任意的文本或html' //这里content是一个普通的String }); layer.open({ type: 1, content: $('#id') //这里content是一个DOM,注意:好该元素要存放在body最外层,否则可能被其它的相对元素所影响 }); //Ajax获取 $.post('url', {}, function(str){ layer.open({ type: 1, content: str //注意,如果str是object,那么需要字符拼接。 }); });
示例:
3.2.如果是iframe层
layer.open({ type: 2, content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no'] });
示例:
3.3.如果是用layer.open执行tips层
layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM });
示例:
4. area 宽高
在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以 area: ['500px', '300px']
5. btn 按钮
信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:
layer.open({ content: 'test', btn: ['按钮一', '按钮二', '按钮三'], yes: function(index, layero){ //按钮【按钮一】的回调 }, btn2: function(index, layero){ //按钮【按钮二】的回调 //return false 开启该代码可禁止点击该按钮关闭 }, btn3: function(index, layero){ //按钮【按钮三】的回调 //return false 开启该代码可禁止点击该按钮关闭 }, cancel: function(){ //右上角关闭回调 //return false 开启该代码可禁止点击该按钮关闭 } });
6, shade 遮罩
即弹层外区域。默认是0.3透明度的黑色背景('#000')如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0
如果你的遮罩是存在的那么你还可以设置 shadeClose 是否点击遮罩关闭 默认:false 如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭
看完了这篇文章,相信你对“layui弹出层如何使用”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
文章题目:layui弹出层如何使用-创新互联
当前URL:http://scyanting.com/article/cedjeg.html