[微信小程式]實現一個自定義遮罩層元件(完整示例程式碼附效果圖)
阿新 • • 發佈:2019-01-26
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。
微信小程式開發交流qq群 173683895 、 526474645 ;
正文:
先上效果圖: 點選按鈕Show顯示遮罩層,再次點選螢幕任何地方隱藏遮罩層;
<button bindtap="showview">Show</button> <view class="bg" bindtap='hideview' style='display:{{display}}'></view> <view class="show" bindtap='hideview' style='display:{{display}}'>申請成功 <view class='txt'>您的密碼為:123456</view> </view>
.bg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: 0.70; filter: alpha(opacity=70); } .show { display: none; text-align: center; position: absolute; top: 45%; left: 20%; width: 53%; height: 10%; padding: 8px; border: 8px solid #e8e9f7; background-color: white; z-index: 1002; overflow: auto; } .txt{ margin-top: 20rpx; font-size: 28rpx; color: royalblue }
Page({
data: {
display:''
},
showview: function() {
this.setData({
display: "block"
})
},
hideview: function() {
this.setData({
display: "none"
})
}
})