wxml代碼
<view class="wrap">
<!---------------------------------------------------------------------------------1 -->
<!--頁面內(nèi)容區(qū) -->
<view class="conts">
<text class="title1">頁面內(nèi)容->根據(jù)自己需求陳列</text>
<button class="btn" type="primary" catchtap="click">點(diǎn)我</button>
</view>
<!----------------------------------------------------------------------------------2 -->
<!--遮罩層 -->
<view class="shade" wx:if="{{shows}}" bindtap='close'></view>
<!----------------------------------------------------------------------------------3 -->
<!--彈出面板區(qū)域 -->
<view class="cont" wx:if="{{ shows}}">
<text class="tit">面板內(nèi)容->根據(jù)自己需求陳列</text>
</view>
</view>
wxss代碼
.wrap{
height: 1000px;
}
/*-----------------------------1頁面內(nèi)容區(qū)樣式---------------------------------- */
.title1{
font-size: 30rpx;
}
.btn{
font-size: 30rpx;
width: 160rpx;
height: 68rpx;
margin-top: 200rpx;
}
/*-----------------------------遮罩層樣式------------------------------------- */
.shade{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0,0,0,0.8);
opacity: 0.5;
overflow: hidden;
}
/*----------------------------面板樣式----------------------------------------- */
.cont {
width: 600rpx;
height: 360rpx;
z-index: 2;
overflow: hidden;
position: fixed;
top: 20%;
left: 60rpx;
font-size: 32rpx;
border-radius: 10rpx;
border: 1rpx solid greenyellow;
background-color: white;
}
.tit{
color: coral;
}
js代碼
Page({
data: {
// 一開始遮罩層與面板隱藏
shows: false,
},
// 點(diǎn)擊“點(diǎn)我”以后遮罩層與面板顯示
click: function (e) {
this.setData({
shows: true,
})
},
// 點(diǎn)擊遮罩層，顯示的遮罩層與面板又隱藏起來
close: function () {
this.setData({
shows: false,
})
},
})
