2025年layer弹层组件PC版介绍以及使用方法示例代码

科技前沿 • 2025-03-26 07:04 • 阅读 27

大家好，我是讯享网，很高兴认识大家。

1、layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

PC版的layer弹层官网地址： https://layer.layui.com/

PC版的layer弹层 API地址： https://www.layui.com/doc/modules/layer.html

前端UI框架layui 官网地址： https://www.layui.com/

layer移动版弹层官网地址： https://layer.layui.com/mobile/

layer移动版弹层 API地址： https://layer.layui.com/mobile/api.html

layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以至今仍把她作为独立组件来维护。不过请注意：无论是独立的 layer，还是作为内置模块的 layer，文档都以本页为准。

layer弹层组件移动版介绍以及使用方法示例代码：https://blog.csdn.net/_/article/details/

讯享网

2、使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景	用前准备	调用方式
1. 作为独立组件使用	如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。	通过script标签引入layer.js后，直接用即可。
2. layui 模块化使用	如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js	通过layui.use('layer', callback)加载模块

作为独立组件使用 layer

引入好layer.js后，直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello');
</script>

在 layui 中使用 layer

layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});

除了上面有所不同，其它都完全一致。

3、layer弹层组件PC独立版示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer弹层组件PC独立版示例</title>
    <style>
        button {
            height: 35px;
            line-height: 35px;
            border-radius: 2px;
            background-color: #1AA094;
            color: #fff;
            border: none;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<button id="btn1">初体验</button>
<button id="btn2">提示层</button>
<button id="btn3">loading层</button>
</body>
</html>
<script src="../jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script>
    $("#btn1").on("click", function () {
        //初体验
        layer.alert('内容')
    })

    $("#btn2").on("click", function () {
        //提示层
        layer.msg('玩命提示中',{"icon" : 2});
    })

    $("#btn3").on("click", function () {
        //loading层
        var index = layer.load(1, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
    })
</script>

讯享网

2025年layer弹层组件PC版介绍以及使用方法示例代码

1、layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

2、使用场景

3、layer弹层组件PC独立版示例代码：

4、效果图：

相关推荐