layer有很多提示框，但是我們使用最多的應該就幾種，我這次做的自定義彈層是仿照美團外賣發紅包的樣式來的，本文使用的點擊方法是angularjs：
1.直接彈框提示
layer.msg("提示幾秒自動消失");
2.用戶可點擊確定和取消按鈕
layer.msg("你還未加入會員，確定加入會員嗎？", {
time: 0
,btn: ['確定', '取消']
,yes: function(index){
layer.close(index);
}
});
3.自定義彈框，這個有好幾種寫法，我提供一種我最喜歡的方式
<div id="red" style="background-color: white; border-radius: 10px; text-align: center; display: none;">
<div style="padding: 3%;">
<div><img src="img/redicon.jpg" align="absmiddle" width="60px" height="60px" /></div>
<div style="font-size: 14px; padding-top: 15px;"><b>恭喜獲得10個紅包</b></div>
<div style="font-size: 13px; padding-top: 5px;">分享給小伙伴，大家一起搶。</div>
</div>
<div style="height: 1px; background-color: #d5d5d5; margin-top: 10px;"></div>
<div style="width: 100%; text-align: center;">
<div style="float: left; width: 49.75%; height: 41px; padding-top: 10px;" ng-click="cancel()">取消</div>
<div style="float: left; width: 1px; height: 41px; background-color: #d5d5d5;"></div>
<div style="float: right; width: 49.75%; height: 41px; padding-top: 10px;" ng-click="sendRedpacket()">發紅包</div>
<div style="clear: both;"></div>
</div>
</div>
完整js代碼：
var redIndex = 0;
// 優惠券
$scope.sendRed = function() {
//頁面層-紅包
redIndex = layer.open({
type: 1,
title: false,
area: ['80%', ''], //寬高
closeBtn: 0,
shadeClose: false,
skin: 'yourclass',
content: $("#red")
});
}
$scope.cancel = function() {
console.log("取消");
layer.close(redIndex);
}
$scope.sendRedpacket = function() {
console.log("確定");
layer.close(redIndex);
}
注：最后的content中的id需要跟html中div的id一致。
頁面效果是這樣的：
彈層.gif
完整的h5代碼在github上：
https://github.com/aiai5251/custom-layer
