前端layui

1.导入插件

layui使用需要导入layui的js和css:

<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

2.layui弹出层

引入layer，以下的其他代码均在...的位置实现：

<script>
     layui.use('layer',function(){
     var layer=layui.layer;
     .....//代码
</script>

2.1最基本的消息框：

layer.open({
    type:1,
    title:['提示信息']
})

---

 2.2消息提示框

括号里面的第一个是显示的信息，后面的要显示的图标，数字不同代表的图标不同。想显示图标时，默认皮肤可以传入0-6，如果是加载层，可以传入0-2。

layer.alert('酷毙了', {icon: 1});

---

这个消息框显示几秒钟后会消失，个人觉得是3秒。

layer.msg("我是消息弹框，我3秒后消失");

---

可以自定义标题和内容的消息提示框：

layer.open({
    skin:'demo-class',//设置弹框样式
    area:['260px','160px'],//弹框的大小
    title:['信息提示框','15px'],//弹框的标题
    content: '恭喜你通过了英语四级考试'//显示的消息内容
})

---

 2.2多个按钮的消息确认框

确认与取消框：btn最后的按钮默认是取消按钮，默认会关闭弹框。

layer.confirm("确定删除吗？",{
    btn:['确定','取消'],
    btn2: function(index, layero){
        //按钮【按钮二】的回调
        alert("点击了取消按钮")
     }
},
    function(index, layero){
    //按钮【按钮一】的回调
        alert("点击了确定按钮")
    }
);

---

 自定义可禁止关闭按钮的弹框：

layer.open({
       content: '你知道牛顿定律吗？'
      ,btn: ['熟悉', '了解', '不清楚'],
    //默认最后一个按钮是关闭窗口的按钮
    yes: function(index, layero){
    alert("熟悉");
    return false; //开启该代码可禁止点击该按钮来关闭窗口
        }
    ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    alert("了解");
    return false;
        }
     ,btn3: function(index, layero){
         //按钮【按钮三】的回调
        alert("不清楚");
        return false;
        }
     ,cancel: function(){
        //右上角关闭回调
        alert("关闭啦");
    }
});            

---

2.3 按钮排列

btnAlign，类型：String，默认：'r'。'l'居左对齐，'c'居中对齐。

layer.open({
    btnAlign:'l',//设置靠左对齐
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

---

2.4关闭按钮样式

类型：String/Boolean，默认：1 。layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0。三种样式如下：

layer.open({
    closeBtn:'2',//设置为第二种样式
    skin:'demo-class',
    area:['260px','160px'],
    title:['信息提示框','15px'],
    content: '恭喜你通过了英语四级考试'
})

---

2.5