微信小程序?qū)崿F(xiàn)一個自定義遮罩層效果
更新時間：2023年09月08日 09:40:37 作者：與f
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個自定義遮罩層,大概效果是點擊按鈕Show顯示遮罩層,再次點擊屏幕任何地方隱藏遮罩層,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
正文：
先上效果圖: 點擊按鈕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"
})
}
})到此這篇關(guān)于微信小程序?qū)崿F(xiàn)一個自定義遮罩層的文章就介紹到這了,更多相關(guān)小程序自定義遮罩層內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript正則表達(dá)配置擴展名并實現(xiàn)驗證
這篇文章主要介紹了javascript正則表達(dá)配置擴展名并實現(xiàn)驗證，文章圍繞主題展開相關(guān)資料，具有以得參考價值，需要的小伙伴可以參考一下2022-02-02
layer彈出框確定前驗證:彈出消息框的方法(彈出兩個layer)
今天小編就為大家分享一篇layer彈出框確定前驗證:彈出消息框的方法(彈出兩個layer)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了前端中骨架屏的三種運用方式,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-05-05
JavaScript結(jié)合xlsx.js實現(xiàn)excel數(shù)據(jù)導(dǎo)出導(dǎo)入功能
在做后端開發(fā)管理實際業(yè)務(wù)開發(fā)中,有時會遇到處理導(dǎo)入、導(dǎo)出Excel文件的數(shù)據(jù),本文主要為大家詳細(xì)介紹了JS如何使用xlsx.js實現(xiàn)這一功能,下面小編就和大家簡單介紹一下吧2026-02-02
在JavaScript中,處理時間和日期是常見任務(wù)之一,涉及到從用戶界面的日期選擇器到服務(wù)器上的時間戳,再到時間間隔的計算,本文將深入探討JavaScript中的時間處理,需要的朋友可以參考下2023-09-09
本文主要分享了原生js開發(fā)的日歷插件的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
基于JavaScript的MQTT實時通信應(yīng)用開發(fā)實戰(zhàn)記錄
MQTT是輕量級發(fā)布/訂閱協(xié)議,專為物聯(lián)網(wǎng)等低帶寬場景設(shè)計,支持QoS分級、遺囑消息等特性,本文通過JavaScript庫實現(xiàn)客戶端,涵蓋連接管理、消息處理及優(yōu)化方案,適用于實時通信應(yīng)用開發(fā),本文給大家介紹基于JavaScript的MQTT實時通信應(yīng)用開發(fā),感興趣的朋友一起看看吧2025-09-09
基于VSCode調(diào)試網(wǎng)頁JavaScript代碼過程詳解
這篇文章主要介紹了基于VSCode調(diào)試網(wǎng)頁JavaScript代碼過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
微信小程序連接服務(wù)器展示MQTT數(shù)據(jù)信息的實現(xiàn)
這篇文章主要介紹了微信小程序連接服務(wù)器展示MQTT數(shù)據(jù)信息的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了js實現(xiàn)文本框輸入文字個數(shù)限制代碼，文本框輸入的文字個數(shù)并不是無限制的，一般都會限定一個輸入最高上限，如何限制，請看本文2015-12-12