layer有很多提示框芜繁,但是我們使用最多的應(yīng)該就幾種珊肃,我這次做的自定義彈層是仿照美團外賣發(fā)紅包的樣式來的荣刑,本文使用的點擊方法是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()">發(fā)紅包</div>
<div style="clear: both;"></div>
</div>
</div>
完整js代碼:
var redIndex = 0;
// 優(yōu)惠券
$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一致。
頁面效果是這樣的:
完整的h5代碼在github上:
https://github.com/aiai5251/custom-layer