web组件新学--layer

在之前项目后台管理界面开发中，不知道有layer这样好用的组件，我的内心是这样的的。。。呀！这个框架有弹框，哈哈哈，好开心，不用自己写遮罩层，不用自己写弹框，好开森。。

当知道有layer之后。。。。。这么方便，这么人性化，好漂亮，哇哦，好简单。。。

或许我这人看到新鲜的东西都叫好吧，不好的暂时没发现，第一次写博客，欢迎广大园友来喷我。。O(∩_∩)O

主要使用的基础参数：

1、type:类型。类型呢，这里我就从官网http://layer.layui.com/api.html#type粘过来了

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

这里我用了默认型0和页面层1.

2、title：标题。我们可以重定义title样式以及文字。样式主要是对一个叫.layui-layer-title的class进行重定义，注意颜色要用！import提高优先级。文字则是title:['转发日志']。当然，也可以不要title,title:false.

css代码如下：.layui-layer-title{font-size:18px;background-color: #147ed6 !important;color: #ffffff !important;}当然这里颜色你们可以自定义也可以用默认的。

当然，你也可以直接title:['转发日志','font-size:18px;background-color: #147ed6 !important;color: #ffffff !important;']。

但争对于该页弹层不止一个，建议采用css样式对“.layui-layer-title”进行全局定义

3、closeBtn：关闭弹层按钮。官网提供两种样式，可对参数配置1(嵌套在弹框内)或2（弹框外部右上角）来实现，如果不需要则配置0。在这里我选择的是closeBtn:1.

但是这里呢，我对关闭按钮进行了重定义，原官网提供默认的是一张黑色的图片，这里呢我把改成了一个大写"X",因为我需要白色，又不想找图片。

怎么改的呢？

对承载样式的class进行了重新定义：

.layui-layer-ico,.layui-layer-close,.layui-layer-close1{color: #ffffff;font-size: 20px !important;background: none !important;margin-top: -4px}
    .layui-layer-ico,.layui-layer-close,.layui-layer-close1:hover{color: #ffffff;font-size: 20px;background: none !important;margin-top: -4px}

4、 content：弹框内容自定义，这里就与平时大家用js封装html没什么区别，如下：

content: '<div style="text-align:center;height:50px;margin-top: 50px";font-size: 16px>' +
                        '<label for="receive" style="color: #666666;">转发给：</label>' +
                        '<input type="text" class="emailReceive" id="receive" placeholder="请输入收件人" style="border-radius:2px;border: 1px solid #c3c3c3;width: 310px;height: 35px;padding-left: 10px;color:#333">' +
                        '</div>' +
                        '<input type="button" value="发送" id="sendEmail" class="sendEmail" >'

5、area:弹框的宽高。不设置就是自适应宽高，我们也可以设置，如此案例就是area: ['490px', '280px']

6、time:显示时间。像提示性的弹框我们经常遇到，弹出一定时间后自动消失，time参数能实现弹框的消失。time:1000,弹出后1秒消失。

7、btn:按钮。layer提供了按钮参数，能快速增加“确定”和“取消”按钮。具体详见官网，这里就是btn:["确定","取消"],

具体实现js案列如下：

var index = layer.open({
                type: 0,//默认值
                title:false,//不显示title
                area: ['490px', '204px'],
                shadeClose: false, //点击遮罩关闭
                closeBtn:0,//不要关闭按钮
                btn:["确定","取消"],//新建确定和取消按钮
                yes:function(){
                    del.parent().parent().parent().remove();
                    layer.close(index);
                },//确定按钮点击事件
                content: '<div style="text-align:center;line-height:120px;font-size:20px">确定要删除吗？</div>'   //内容更改
            });

声明：参考资源来自于layer官网：http://layer.layui.com；

纯属个人总结，如有雷同，纯属巧合；

个人漏言，请勿抄袭。