【JS】Layer一款超实用的web弹框组件

最新推荐文章于 2024-05-11 09:32:04 发布

qing_小诺

最新推荐文章于 2024-05-11 09:32:04 发布

阅读量1.3k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_33237207/article/details/82149858

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

layer是一款近年来备受青睐的web弹层组件，在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。

例如之前写带有输入弹框时，都是自己吭吭哧哧的写了页面和样式，然后再用js控制展示与否，想想都很傻的代码。

现在好了，有组件可以帮助的嘛~况且效果还不错的哦。下面来学习一下Layer，实现快速上手：

step1：点击进入layer官网链接：https://layer.layui.com/ 下载layer包：

step2：将下载的文件解压，之后将 layer 整个文件夹存放到你项目的任意目录。

step3：使用 layer.js 之前必须先引入jquery.js文件（jQuery1.8或以上版本）。

下面是使用layer的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layer练习</title>
    <style>
        .btn div {
            margin: 20px;
            border: 1px solid #ccc;
            width: 150px;
            float: left;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: white;
            background-color: #01AAED;
        }
    </style>

</head>
<body>

<div class="btn">
    <div id="btn1">弹出一个提示框</div>
    <div id="btn2">弹出一个页面层</div>
    <div id="btn3">弹出一个iframe层</div>
    <div id="btn4">弹出一个loading层</div>
    <div id="btn5">弹出一个tips层</div>
    <div id="btn6">询问框</div>
    <div id="btn7">prompt层</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script>

    $('#btn1').on('click', function () {
        //弹出一个提示层
        layer.msg('hello');
    });

    $('#btn2').on('click', function () {
        //弹出一个页面层
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '<div style="padding:20px;">自定义内容</div>'
        });
    });

    $('#btn3').on('click', function () {
        //弹出一个iframe层
        layer.open({
            type: 2,
            title: 'iframe父子操作',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: 'https://www.baidu.com/'
        });
    });

    $('#btn4').on('click', function () {
        //弹出一个loading层
        var ii = layer.load();
        //此处用setTimeout演示ajax的回调
        setTimeout(function () {
            layer.close(ii);
        }, 1000);
    });

    $('#btn5').on('click', function () {
        //弹出一个tips层
        layer.tips('Hello tips!', '#btn5');
    });

    $('#btn6').on('click', function () {
        layer.confirm('您是如何看待前端开发？', {
            btn: ['重要','奇葩'] //按钮
        }, function(){
            layer.msg('的确很重要', {icon: 1});
        }, function(){
            layer.msg('也可以这样', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了']
            });
        });
    });

    $('#btn7').on('click', function () {
        layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
            layer.close(index);
            layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
                layer.close(index);
                layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
            });
        });
    });
</script>
</body>
</html>

当然想要了解更多，可以到 Layui 官网查看内置模块--弹出层layer的文档（https://www.layui.com/doc/modules/layer.html），个人感觉 Layui 还是可以学习一下的，预览了他们的后台模板（下载要钱，预览不要钱），感觉还是挺高大上的。

qing_小诺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【JS】Layer一款超实用的web弹框组件

layer是一款近年来备受青睐的web弹层组件，在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer。例如之前写带有输入弹框时，都是自己吭吭哧哧的写了页面和样式，然后再用js控制展示与否，想想都很傻的代码。现在好了，有组件可以帮助的嘛~况且效果还不错的哦。下面来学习一下...
复制链接

扫一扫