web页面弹框插件layer

来源：互联网发布：学生党淘宝店推荐不贵编辑：程序博客网时间：2024/05/17 04:03

1、前言

作为一个后台开发人员，写一个页面的弹框稍微有点费劲。今天整理了一个前端的弹框插件，记录一下。

2、demo

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>弹框示例</title><body><button id="btn1">弹框演示</button></body><!-- 这个DIV作为content属性的内容，最好写在body之外 --><div id="content" style="padding:20px; display: none">今天加班很辛苦</div><script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="layer/layer.js"></script><script type="text/javascript">    $(function(){        $("#btn1").click(function(){            layer.open({                title:"审核日志",   //弹框的title，默认是"信息"                type: 1,           //基本层的类型                area: ['600px', '360px'],       //弹框的区域                shadeClose: true,               //点击遮罩关闭                content: $("#content"),         //内容展示，可以是字符串还可以是DOM节点                btn:['按钮1','按钮2','按钮3'],    //按钮定义                btnAlign: 'c',                  //按钮居中                btn1:function(){                //给按钮绑定事件：默认第一个按钮为yes，也可以使用yes绑定，事件执行之后，保持原状。默认返回true                    layer.alert("按钮1-加图片的简单提示",{icon:1}); //带图表美化版的alert                },                btn2:function(){                    layer.alert("按钮2-有回调函数",function(){    //alert弹框之后绑定函数                        layer.alert("简单提示");                    });                    return false;              //阻止弹框消失                },                btn3:function(){                    layer.alert("按钮3-简单提示",{                        btnAlign: 'c'               //嵌套定义按钮                    });     //简单美化版alert                    return false;                },                cancel: function(){                 //给右上角的"X"绑定事件                    layer.msg('取消');               //提示信息，默认3s消失                }            });        });    });</script></html>

3、使用注意事项

layer作为一个独立的组件，单独可以使用。主要引入layer.js即可。
需要绑定事件，需要因为jquery1.8以上的js。jquery.js必须在layer.js前面，否则报错。
content对应的内容，如果使用DOM，最好写在body外面，防止冲突。

4、官方参考文档

http://www.layui.com/doc/modules/layer.html

阅读全文

0 0