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

客官°小女子只卖身不卖艺 2022-03-30 14:50 166阅读 0赞

官网的效果图如下：

![735803-20180403142824974-1332444593.png][]

效果图如下：

![735803-20180403143029656-523544997.png][]

我们需要在显示下面浮层的时候显示后面的半透明背景，Framework 7 里面默认有个半透明背景，如下图：

![735803-20180403143418348-14720223.png][]

解决方案：

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

![735803-20180403144553580-2107081823.png][]

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

[735803-20180403142824974-1332444593.png]: /images/20220330/b8c7cb2461594d1787bcb7ea56ee8a10.png
[735803-20180403143029656-523544997.png]: /images/20220330/daa1a39334e048d58bdb0f9da0f7c869.png
[735803-20180403143418348-14720223.png]: /images/20220330/01fc5e0b107646539aa1d19710ac62e0.png
[735803-20180403144553580-2107081823.png]: /images/20220330/5c07923cedfa418489a5846181345f85.png