Framework 7 之 給Picker Modal 添加半透明背景

官網的效果圖以下：

 

效果圖以下：

 

咱們須要在顯示下面浮層的時候顯示後面的半透明背景，Framework 7 裏面默認有個半透明背景，以下圖：

 

 解決方案：

1.在</body>標籤以前添加<div class="modal-overlay"></div> ；

2.modal-overlay的z-index值爲13000，.picker-modal的z-index值爲12500，因此若是要讓picker-modal顯示在半透明背景之上，須要把picker-modal的z-index值設爲大於13000；

3.picker-modal展開的時候就給 modal-overlay 添加 modal-overlay-visible,關閉的時候就移除 modal-overlay-visible,具體代碼以下：

$$(".picker-modal_consume_type").on('open', function () { //picker-modal_comsume_type爲彈出層的class，下圖有說明
    $(".modal-overlay").addClass("modal-overlay-visible");
});

$$(".picker-modal_consume_type").on('close', function () {
    $(".modal-overlay").removeClass("modal-overlay-visible");
});

function  closeConsumeModal() {
    myApp.closeModal('.picker-modal_consume_type');
    $(".modal-overlay").removeClass("modal-overlay-visible");
}
$(".modal-overlay").click(function () { //點擊半透明背景層隱藏浮層
    closeConsumeModal();
});

 

 

 好了~經過上面三步就能夠實現咱們想要的效果了~