wxml
<view class='{{!modalFlag?"scan-book":"scan-books"}}' catchtap='scanbookTap'>
<view class='{{!modalFlag?"buttonPicker_screen_main":"buttonPicker_screen_mains"}}'>
</view>
</view>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
wxss
.scan-book {
width: 750rpx;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: fixed;
z-index: 2000;
top: 0;
}
.scan-books {
display: none;
}
.buttonPicker_screen_main {
border:1px solid #dedede;
width:700rpx;
height:400rpx;
position:fixed;
top:0;
left:0;
right:0;
background:white;
overflow:hidden;
display:flex;
flex-direction:column;
display:-webkit-flex;
justify-content:center;
margin:0 auto;
color:white;
margin-top:180rpx;
}
.buttonPicker_screen_mains {
display: none;
}
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。js
data: {
modalFlag: true,
},
scanbookTap: function () {
this.setData({ modalFlag: true, })
},