layer 弹窗 加载层 选择框

一款非常好用的前端 弹出框/层，特别容易上手。
官网 : http://layer.layui.com

首先依赖jquery

1.alert

layer.alert("显示信息"); // 最基本的

layer.alert("显示信息", {
    icon: 0 , // 0~6
    title: "标题", // 文字、 、false
    closeBtn: 1 // 右上角关闭x 0:无 1:有 2:有(略丑)
});

layer.alert("显示信息", {
    title: "标题"
}, function (index) {
    // 点击确定按钮，执行代码块，不会关闭当前提示

    layer.close(index); // 关闭当前提示
});

2.confirm

layer.confirm("请确认",{
    title: false,
    btn: ['确定','取消']
},function(){
    layer.alert("确定");
},function(){
    layer.alert("取消");
});

3.信息框(最常用)

layer.msg("最常用的提示",{
    title: false,
    closeBtn: 0,
    time: 3*1000, // 3秒后关闭
    shadeClose: true, // 点击其他位置关闭
    scrollbar: false // 锁定滚动条
});

var layerMsg = layer.msg("加载中", {
    title: false,
    icon: 16 // 加载图标
});

layer.close(layerMsg); // 关闭单个
layer.closeAll(); // 关闭所有

4.页面层

layer.open({
    type: 1, 
    content: '随意标签或者文本'
});

5.加载层

var layerMsg = layer.load(1,{ // 此处1没有意义，随便写个东西
    icon: 0, // 0~2 ,0比较好看
    shade: [0.5,'black'] // 黑色透明度0.5背景
});
layer.close(layerMsg); // 关闭单个
layer.closeAll(); // 关闭所有

常用属性

// 坐标 , y z
offset: ['100px', '50px']
offset: '100px' // 设置垂直坐标，水平自适应
offset: 't' // 顶部
offset: 'r' // 靠右
offset: 'b' // 底部
offset: 'l' // 靠左
offset: 'lt' // 左上
offset: 'lb' // 左下
offset: 'rt' // 右上
offset: 'rb' // 右下

// 宽高
area: ['100px', '100px']
area: '100px' // 定义宽度，高度自适应

style: class // 定义一个样式