layer

　　1.获得 layui 后，将其完整地部署到你的项目目录，你只需要引入下述两个文件：

1. ./layui/css/layui.css
2. ./layui/layui.js //提示：如果是采用非模块化方式(建议使用)，此处可换成：./layui/layui.all.js

基础用法(直接看代码)：

//加载form,layer,jq ,编辑器模块
    layui.use(['layer', 'form', 'jquery', 'layedit'], function() {
        //初始化模块
        var layer = layui.layer,
            form = layui.form,
            $ = layui.$,
            layedit = layui.layedit;

        //使用模块

        //自定义皮肤弹窗
        $('#btn0').click(function() {
            layer.alert('我和别人不一样', {
                skin: 'demo-class',
                title: '皮肤',
                btn: ['明白了', '知道了','呵呵'],

            });
        })

        //普通消息框
        $('#btn1').click(function() {
            layer.msg('提示消息', {
                icon: 1,
                btn: ['明白了', '知道了'],
                time: 1500 //设置消息提示显示时间(毫秒)
            });
            //layer.load(2); //风格1的加载

        })

        //基础提示框
        $('#btn2').click(function() {
            layer.open({
                type: 1,
                title: ['我是提示标题', 'color:red;font-size:14px'],
                //这里content可以传入String/DOM/Array
                content: '我是提示的内容',
                area: ['250px', '200px'], //设置提示框的大小
                maxmin: true //该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置即可

            });
        })

        //基础confirm
        $('#btn3').click(function() {
            layer.confirm('好牛逼的弹窗啊', {
                btn: ['按钮1', '按钮2', '按钮3', ] //可以设置无限个按钮
                    ,
                yes: function() {
                    layer.msg('我是按钮1的回调', {
                        icon: 1
                    });
                },
                btn2: function() {
                    layer.msg('我是按钮1的回调', {
                        icon: 2
                    });
                },

                btn3: function() {
                    layer.msg('我是按钮3的回调', {
                        icon: 4
                    });
                },
                cancel: function() {
                    alert('关闭按钮的回调')
                    //return false //开启该代码可禁止点击该按钮关闭
                },

                btnAlign: 'l', //设置按钮的排列方式

                closeBtn: 2, //设置关闭按钮的样式 只能是1 2 0

                shade: [1, 'red'], //设置遮罩层的样式 设置为0则关闭遮罩

                anim: 4 //设置弹出动画

            });

        })

        //iframe 弹窗

        $('#btn4').click(function() {

            layer.open({
                title: 'ifram弹窗',
                maxmin: true, //开启最大化最小化按钮
                shade: [0.3, '#393D49'],
                type: 2,
                content: ['page2.html'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        })

        //带有吸附效果的弹窗
        $('#btn5').click(function() {
            layer.tips('这里是提示内容', '#btn5', //提示内容支持html 可以改字体颜色
                {
                    tips: [1, '#76d4f5'], //设置提示的位置 颜色
                    time: 1500
                })

        })

        //位置弹窗
        $('#btn6').click(function() {
            layer.alert('可以设置位置', {
                icon: 1,
                title: '右下角',
                offset: 'rb'
            })

        })

        //加载弹窗
        $('#btn7').click(function() {
            layer.load(2, {
                time: 3000
            });
        })

        //富文本编辑器

        $('#btn8').click(function() {
            //建立编辑器
            bianji = layedit.build('demo', {

                tool: [
                    'strong' //加粗
                    , 'italic' //斜体
                    , 'underline' //下划线
                    , 'del' //删除线

                    , '|' //分割线

                    , 'left' //左对齐
                    , 'center' //居中对齐
                    , 'right' //右对齐
                    , 'link' //超链接
                    , 'unlink' //清除链接
                    , 'face' //表情
                    , 'image' //插入图片
                    , 'help' //帮助
                ]
            });
        })

        $('#btn9').click(function() {

            alert(layedit.getContent(bianji));

        })

    });

注意：想自定义皮肤的时候在配置选项中添加skin:'css中的自定义皮肤名'选项，找到dom对象中对应的css名称自己编写即可