layer mobile使用方法

最新推荐文章于 2026-05-21 14:10:16 发布

原创最新推荐文章于 2026-05-21 14:10:16 发布 · 1w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#layer mobil

本文介绍如何利用Layer.js库和jQuery结合CSS样式来自定义网页弹窗，包括引入必要的文件、设置弹窗样式、定义弹窗内容及通过jQuery调用弹窗的方法。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

1.首先页面中引入css文件和js文件

<link rel="stylesheet" type="text/css" href="js/layer/need/layer.css">
<script src="js/jquery-2.1.4.min.js"></script>//以jq为基础，可不用
<script src="js/layer/layer.js"></script>

2.弹窗公共样式

.layui-m-layer0 {
    .layui-m-layerchild {
        width: 5.4rem !important;
        border-radius: .2rem;
        .layui-m-layercont {
            padding: 0;
            .title {
                padding: .34rem .6rem .34rem .6rem;
                line-height: .48rem;
                font-size: .3rem;
                font-weight: bold;
            }
        }
        .layui-m-layerbtn {
            height: .89rem;
            line-height: .89rem;
            font-size: .36rem;
            background: #fff;
            border-color: #E6E6E6;
            border-radius: 0 0 .2rem .2rem;
            >span {
                border-color: #E6E6E6;
                color: #1786FC;
                &:first-child {
                    border-radius: 0 0 0 .2rem;
                }
                &:last-child {
                    border-radius: 0 0 .2rem 0;
                }
            }
        }
    }
}

3.自定义弹窗内容

<div style="display:none;" class="dialog-box js-tel-box">
    <div>
        <p class="title">亲，我们将以电话形式告知您 验证码，您将会接到【138001 3800】电话，请放心接听！</p>
    </div>
</div>

4.调用

$('.js-turn-voice').on('click', function () {
    layer.open({
        content: $('.js-tel-box').html(),
        btn: ['现在接听', '取消'],
        yes: function (index) {
            layer.close(index);
            settime(obj);
        }
    });
})