【安利】弹出层插件

layer弹出层方案

 提示层
layer.msg('玩命提示中');

 

询问层
//询问框
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){//重要按钮弹出
layer.msg('的确很重要', {icon: 1});
}, function(){//重要奇葩按钮弹出
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});

 

页面层
layer.open({
type: 1 //Page层类型
,area: ['500px', '300px']//面积大小
,title: '你好，layer。'//头部
,shade: 0.6 //遮罩透明度
,maxmin: true //允许全屏最小化
,anim: 1 //0-6的动画形式，-1不开启
,content: '<div style="padding:50px;">这是一个非常普通的页面层，传入了自定义的html</div>'//内容
});

 

 

Tab层
//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文档手册页
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
});
});

 

小tips
//小tips
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
tips: [1, '#3595CC'],
time: 4000
});

 

iframe窗

layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '//fly.layui.com/'
});

 

artDialog弹出层方案

https://github.com/aui/artDialog

普通对话框
var d = dialog({
title: '提示',
content: '按钮回调函数返回 false 则不许关闭',
okValue: '确定',
ok: function () {
this.title('提交中…');
return false;
},
cancelValue: '取消',
cancel: function () {}
});
d.show();

 

气泡浮层
var d = dialog({
content: 'Hello World!',
quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById('标签ID'));

 

 

12个方向定位：
var follow = document.getElementById('标签ID');
var d = dialog({
align: 'bottom left',
content: 'hello world'
});

d.show(follow);

align属性：
top
top left
left top
left
left bottom
bottom left
bottom
bottom right
right bottom
right
right top
top right
https://aui.github.io/artDialog/test/align.html

提示框定时关闭
var d = dialog({
content: '对话框将在两秒内关闭'
});
d.show();
setTimeout(function () {
d.close().remove();
}, 2000);