Layui--弹出层layer

最新推荐文章于 2023-05-18 13:55:37 发布

y_bccl27

最新推荐文章于 2023-05-18 13:55:37 发布

阅读量241

点赞数

分类专栏： UI

本文链接：https://blog.csdn.net/y_bccl27/article/details/103344641

版权

UI 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开发测试时的layui版本为2.5.5

模块加载名称：layer

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>弹层</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
</head>
<body>
    <div class="layui-btn layui-btn-primary layer-demolist" id="test1">
        我下面会出现一个弹层    
    </div>

<script>
    layui.use('layer',function () {
        var layer=layui.layer;
        layer.tips('上','#test1',{//表示在id=test1的地方显示弹层
           tips: [1, '#c00'],// 1/2/3/4分别表示从：上/右/下/左显示弹层
           time:3000 // 设置为0表示不消失,默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
        });
    })
</script>
</body>

一、tips：设置 tips层方向和颜色

layer.tips('上','#test1',{
    tips: 1
});

类型：Number/Array，默认：2，是tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']

二、time：设置 tips层自动关闭所需毫秒

layui.use('layer',function () {
    var layer=layui.layer;
    layer.tips('上','#test1',{
           time:3000
    });
})

类型：Number，默认：0，默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

三、tipsMore：设置tips层是否允许多个tips

layui.use('layer',function () {
    var layer=layui.layer;
    layer.tips('上','#test1',{
        tips: [1, '#c00'],
        time:3000, 
        tipsMore: true
    });
})

类型：Boolean，默认：false，允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启。当前示例展示的是tipsMore的位置用法，具体效果实现需要构建多个弹出层看效果

<button id="show" class="layui-btn layui-btn-primary">显示弹层</button>

    <center>
        <div class="layui-btn layui-btn-primary layer-demolist" id="test1">我上面会出现一个弹层</div>
        <div class="layui-btn layui-btn-primary layer-demolist" id="test2">我右面会出现一个弹层</div>
        <div class="layui-btn layui-btn-primary layer-demolist" id="test3">我下面会出现一个弹层</div>
        <div class="layui-btn layui-btn-primary layer-demolist" id="test4">我左面会出现一个弹层</div>
    </center>

    <script>
        layui.use('layer',function () {
            $('#show').click(function () {
                for (i = 1; i <= 4; i++) {
                    layui.layer.tips(i, '#test' + i, {//表示在id=test1的地方显示弹层
                        tips: i,//1、2、3、4分别表示从：上/右/下/左显示弹层
                        //area:['200px','20px'],//设置长高s
                        time: 0,//设置为0表示不消失
                        tipsMore: true,//支持多个弹层
                        success: function (layero, index) {
                            //success - 弹出层弹出后的成功回调方法
                            //当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引
                        }
                    });
                }
            });
        });

    </script>

四、shade：设置tips层遮罩

layui.use('layer',function () {
    var layer=layui.layer;
    layer.tips('上','#test1',{//表示在id=test1的地方显示弹层
        tips: [1, '#c00'],// 1/2/3/4分别表示从：上/右/下/左显示弹层
        time:3000,
        shade:0.3
    });
});

类型：Double/Array/Boolean，默认开启后弹层外区域为0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0

五、shadeClose：是否点击遮罩关闭

layui.use('layer',function () {
    var layer=layui.layer;
    layer.tips('上','#test1',{//表示在id=test1的地方显示弹层
        tips: [1, '#c00'],// 1/2/3/4分别表示从：上/右/下/左显示弹层
        shade:[0.8, '#393D49'],
        shadeClose:true
    });
})

类型：Boolean，默认：false。如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

y_bccl27

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layui--弹出层layer

开发测试时的layui版本为2.5.5模块加载名称：layer<!DOCTYPE html><html xmlns:th="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8"> <title>弹层</title> <l...
复制链接

扫一扫

专栏目录