本文实例讲述了layer弹窗插件操作方法。分享给大家供大家参考,具体如下:
1、首先去http://layer.layui.com/下载插件
2、在网站上有演示说明
3、操作方法如何
显示的内容
手机弹窗效果
自动关闭
layer.open({
content: '通过style设置你想要的样式',style: 'background-color:#09C1FF; color:#fff; border:none;',time: 2
});
//弹窗后点击关闭
layer.open({
btn: ['关闭'],content:'内容'
})
更多弹效果
内容')
//第三方扩展皮肤
layer.alert('内容',{
icon: 1,skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
})
//询问框
layer.confirm('您是如何看待前端开发?',{
btn: ['重要','奇葩'] //按钮
},function(){
layer.msg('的确很重要',{icon: 1});
},function(){
layer.msg('也可以这样',{
time: 20000,//20s后自动关闭
btn: ['明白了','知道了']
});
});
//提示层
layer.msg('玩命提示中');
//墨绿深蓝风
layer.alert('墨绿风格,点击确认看深蓝',{
skin: 'layui-layer-molv' //样式类名,closeBtn: 0
},function(){
layer.alert('偶吧深蓝style',{
skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //动画类型
});
});
//捕获页
layer.open({
type: 1,shade: false,title: false,//不显示标题
content: $('.layer_notice'),//捕获的元素
cancel: function(index){
layer.close(index);
this.content.show();
layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构',{time: 5000,icon:6});
}
});
//页面层
layer.open({
type: 1,skin: 'layui-layer-rim',//加上边框
area: ['420px','240px'],//宽高
content: 'html内容'
});
//自定页
layer.open({
type: 1,skin: 'layui-layer-demo',//样式类名
closeBtn: 0,//不显示关闭按钮
shift: 2,shadeClose: true,//开启遮罩关闭
content: '内容'
});
//tips层
layer.tips('Hi,我是tips','吸附元素选择器,如#id');
//iframe层
layer.open({
type: 2,title: 'layer mobile页',shade: 0.8,area: ['380px','90%'],content: 'http://layer.layui.com/mobile/' //iframe的url
});
//iframe窗
layer.open({
type: 2,//不显示关闭按钮
shade: [0],area: ['340px','215px'],offset: 'rb',//右下角弹出
time: 2000,//2秒后自动关闭
shift: 2,content: ['test/guodu.html','no'],//iframe的url,no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,title: '很多时候,我们想最大化看,比如像这个页面。',maxmin: true,//开启最大化最小化按钮
area: ['893px','600px'],content: 'http://fly.layui.com/'
});
}
});
//加载层
var index = layer.load(0,{shade: false}); //0代表加载的风格,支持0-2
//loading层
var index = layer.load(1,{
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
//小tips
layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。','吸附元素选择器',{
tips: [1,'#3595CC'],time: 4000
});
//prompt层
layer.prompt({
title: '输入任何口令,并确认',formType: 1 //prompt风格,支持0-2
},function(pass){
layer.prompt({title: '随便写点啥,并确认',formType: 2},function(text){
layer.msg('演示完毕!您的口令:'+ pass +' 您最后写下了:'+ text);
});
});
//tab层
layer.tab({
area: ['600px','300px'],tab: [{
title: 'TAB1',content: '内容1'
},{
title: 'TAB2',content: '内容2'
},{
title: 'TAB3',content: '内容3'
}]
});
//相册层
$.getJSON('test/photos.json?v='+new Date,function(json){
layer.photos({
photos: json //格式见API文档手册页,shift: 5 //0-6的选择,指定弹出图片动画类型,默认随机
});
});
更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
原文链接:https://www.f2er.com/js/39166.html