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

});

好了~通过上面三步就可以实现我们想要的效果了~