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);}}); })

最終樣式

總結

以上是生活随笔為你收集整理的layer mobile使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。