web页面弹框插件layer

最新推荐文章于 2024-04-20 14:57:38 发布

智_永无止境

最新推荐文章于 2024-04-20 14:57:38 发布

阅读量882

点赞数

分类专栏： JS 文章标签： JS web 前端插件

本文链接：https://blog.csdn.net/static_coder/article/details/78071113

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web页面弹框插件layer

1、前言作为一个后台开发人员，写一个页面的弹框稍微有点费劲。今天整理了一个前端的弹框插件，记录一下。2、demo<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>弹框示例</title><body><button id="btn1">弹框演示</button></body><di
复制链接

扫一扫