web页面弹框插件layer

news/2024/7/19 14:54:48 标签: JS, web, 前端, 插件

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>