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);
}
});
})
最终样式