核心代码如下
<button bindtap="show_shelter">点击显示遮罩层</button>
<view class="modal_shelter {{showing==true? 'showing' : ''}}" bindtap="hide_shelter"></view>
Page({
data: {
showing:false
},
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
},
show_shelter:function(){
this.setData({
showing:true
})
},
hide_shelter:function(){
this.setData({
showing:false
})
}
})
.modal_shelter {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2110;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
transform: scale(1.185);
/*backface-visibility: hidden;perspective: 2000rpx;*/
background: rgba(0, 0, 0, 0.3);
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
.showing {
opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
}