layer mobile使用方法_layui mobile

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>
1
2
3

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;
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

3.自定义弹窗内容

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

4.调用

$('.js-turn-voice').on('click', function () {
    layer.open({
        content: $('.js-tel-box').html(),
        btn: ['现在接听', '取消'],
        yes: function (index) {
            layer.close(index);
            settime(obj);
        }
    });
})
1
2
3
4
5
6
7
8
9
10

最终样式