layer是一款非常好用的插件，相信很多小伙伴都使用过，插件使用layer v3.1.1，文档地址：https://layui.gitee.io/v2/layer/。为了更合适光年模板，这里对插件做了一些调整，去除了一些图片，调整为字体图标，调整了颜色搭配。
使用弹窗
$('#example-1').click(function() {
layer.alert('钱月英酬神还愿 冯子清误入桃园');
});
使用图标
为了更易识别，这里将图标的设置值改为：success、error、doubt、lock、cry、smile、warning。
<p id="example-icon">
<button class="btn btn-primary" data-icon="success">正确</button>
<button class="btn btn-danger" data-icon="error">错误</button>
<button class="btn btn-yellow" data-icon="doubt">疑问</button>
<button class="btn btn-secondary" data-icon="lock">锁定</button>
<button class="btn btn-pink" data-icon="cry">哭脸</button>
<button class="btn btn-success" data-icon="smile">笑脸</button>
<button class="btn btn-warning" data-icon="warning">警告</button>
</p>
// 使用图标
$('#example-icon').find('.btn').click(function() {
layer.alert('赠金扇冯旭得意 拜天地翠秀许婚', {
icon: $(this).data('icon'),
})
});
询问框
layer.confirm('游西湖林璋遇故 卖宝剑马云逢凶？', {
btn: ['重要', '奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 'success'});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
提示层
layer.msg('马云大闹五柳园 汤彪仗义赠金帛');
layer.msg('诸葛亮智算华容 关云长义释曹操', function(){
//关闭后的操作
});
风格
这里新增了弹窗的样式皮肤：lyear-skin-primary、lyear-skin-success、lyear-skin-info、lyear-skin-warning、lyear-skin-danger、lyear-skin-secondary、lyear-skin-purple、lyear-skin-pink、lyear-skin-cyan、lyear-skin-yellow、lyear-skin-brown、lyear-skin-dark。
<div id="example-skin">
<button class="btn btn-primary" data-skin="lyear-skin-primary">主色</button>
<button class="btn btn-success" data-skin="lyear-skin-success">成功</button>
<button class="btn btn-info" data-skin="lyear-skin-info">信息</button>
<button class="btn btn-warning" data-skin="lyear-skin-warning">警告</button>
<button class="btn btn-danger" data-skin="lyear-skin-danger">错误</button>
<button class="btn btn-secondary" data-skin="lyear-skin-secondary">灰色</button>
<button class="btn btn-purple" data-skin="lyear-skin-purple">紫色</button>
<button class="btn btn-pink" data-skin="lyear-skin-pink">粉红</button>
<button class="btn btn-cyan" data-skin="lyear-skin-cyan">青色</button>
<button class="btn btn-yellow" data-skin="lyear-skin-yellow">黄色</button>
<button class="btn btn-brown" data-skin="lyear-skin-brown">棕色</button>
<button class="btn btn-dark" data-skin="lyear-skin-dark">黑色</button>
</div>
// 风格
$('#example-skin').find('.btn').click(function() {
layer.alert('真才子走笔成章 假斯文揉碎肚肠', {
skin: $(this).data('skin'),
});
});
捕获页
<div class="test-example-4">
<ul class="list-unstyled p-3 mb-0">
<li>第06回 姚夏封广陵风鉴 常万青南海朝山</li>
<li>第07回 朱翰林代为月老 冯子清聘定月英</li>
<li>第08回 魏家妇人前卖俏 花文芳黑夜偷情</li>
</ul>
</div>
<button class="btn btn-default" id="example-4">捕获页</button>
// 捕获页
$('#example-4').click(function() {
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.test-example-4'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 'success'});
}
});
});
页面层
$('#example-5').click(function() {
layer.open({
type: 1,
skin: 'layui-layer-rim', // 加上边框
area: ['420px', '240px'], // 宽高
content: '<div class="p-3">魏临川于中取利 花文芳将计就计</div>'
});
});
tips层
$('#example-6').click(function() {
layer.tips('Hi，我是tips', '#example-6');
});
iframe层
$('#example-7').click(function() {
layer.open({
type: 2,
title: 'Light Year Admin',
shadeClose: true,
shade: 0.5,
area: ['380px', '90%'],
content: 'http://lyear.itshubao.com' //iframe的url
});
});
iframe窗
$('#example-8').click(function() {
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: ['./data/card-reload.txt', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '//lyear.itshubao.com/'
});
}
});
});
加载层
这里将gif动画改为 css3 动画，风格仍然保留0-2。
$('#example-loading').find('.btn').click(function() {
var index = layer.load($(this).data('effect'), { shade: false }); // 第一个参数为风格，支持0-2
setTimeout(function(){
layer.close(index)
}, 3000);
});
loading层
$('#example-9').click(function() {
var index = layer.load(0, { shade: [0.1, '#000'] }); // 0.1透明度的白色背景
setTimeout(function(){
layer.close(index)
}, 3000);
});
小tips
$('#example-10').click(function() {
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#example-10', {
tips: [1, '#33cabb'],
time: 4000
});
});
prompt层
$('#example-11').click(function() {
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
});
});
});
相册层
$('#example-13').click(function() {
var json = {
"status": 1,
"msg": "",
"title": "JSON请求的相册",
"id": 8,
"start": 0,
"data": [{
"alt": "花", "pid": 109, "src": "//libs.itshubao.com/pic/small_007.jpg", "thumb": ""
},
{
"alt": "油菜花", "pid": 110, "src": "//libs.itshubao.com/pic/medium_003.jpg", "thumb": ""
},
{
"alt": "粉红", "pid": 111, "src": "images/gallery/1.jpg", "thumb": ""
},
{
"alt": "牵牛花", "pid": 112, "src": "//libs.itshubao.com/pic/big_005.jpg", "thumb": ""
},
{
"alt": "大娃", "pid": 113, "src": "images/users/avatar-1.png", "thumb": ""
}]
};
layer.photos({
photos: json // 格式见API文档手册页
, anim: 5 // 0-6的选择，指定弹出图片动画类型，默认随机
});
});
信息框
模板信息框是白色背景的，你也可以用 bg-* 来增加信息框背景样式。
<div id="example-notice">
<button class="btn btn-default">默认</button>
<button class="btn btn-primary" data-bg="bg-primary">主色</button>
<button class="btn btn-success" data-bg="bg-success">成功</button>
<button class="btn btn-info" data-bg="bg-info">信息</button>
<button class="btn btn-warning" data-bg="bg-warning">警告</button>
<button class="btn btn-danger" data-bg="bg-danger">错误</button>
<button class="btn btn-secondary" data-bg="bg-secondary">灰色</button>
<button class="btn btn-purple" data-bg="bg-purple">紫色</button>
<button class="btn btn-pink" data-bg="bg-pink">粉红</button>
<button class="btn btn-cyan" data-bg="bg-cyan">青色</button>
<button class="btn btn-yellow" data-bg="bg-yellow">黄色</button>
<button class="btn btn-brown" data-bg="bg-brown">棕色</button>
<button class="btn btn-dark" data-bg="bg-dark">黑色</button>
</div>
// 信息框
$('#example-notice').find('.btn').click(function() {
layer.msg('不开心。。。', {
icon: 'cry',
skin: $(this).data('bg')
});
});
自定义页面层
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'bg-success',
content: '<div class="p-3"><h6>采桑子·时光只解催人老</h6>时光只解催人老，不信多情，长恨离亭，泪滴春衫酒易醒。<br>梧桐昨夜西风急，淡月胧明，好梦频惊，何处高楼雁一声？</div>'
});
tips层位置
$('#example-top').click(function() {
layer.tips('上', $(this), {
tips: [1, '#000']
});
});
$('#example-right').click(function() {
layer.tips('默认就是向右的', $(this));
});
$('#example-bottom').click(function() {
layer.tips('下', $(this), {
tips: 3
});
});
$('#example-left').click(function() {
layer.tips('在很久以前……', $(this), {
tips: [4, '#33cabb'],
time: 300000
});
});
$('#example-more').click(function() {
layer.tips('不会销毁之前的', $(this), {tipsMore: true});
});
弹出位置
$('#example-position').find('.btn').click(function() {
var type = $(this).data('position'),
text = $(this).text();
layer.open({
type: 1
,offset: $(this).data('position') //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
,id: 'LAY_demo'+type //防止重复弹出
,content: ''+ text +''
,btn: '关闭全部'
,btnAlign: 'c'
,shade: 0
,yes: function(){
layer.closeAll();
}
});
});