小程序 自定義彈框

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, })

},