微信小程序?qū)崿F(xiàn)一個自定義遮罩層效果
更新時間：2023年09月08日 09:40:37 作者：與f
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個自定義遮罩層,大概效果是點擊按鈕Show顯示遮罩層,再次點擊屏幕任何地方隱藏遮罩層,本文結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
正文：
先上效果圖: 點擊按鈕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"
})
}
})到此這篇關于微信小程序?qū)崿F(xiàn)一個自定義遮罩層的文章就介紹到這了,更多相關小程序自定義遮罩層內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)左側滑欄過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
Autocomplete Textbox Example javascript實現(xiàn)自動完成成功
Autocomplete Textbox Example javascript實現(xiàn)自動完成成功...2007-08-08
JS數(shù)據(jù)類型（基本數(shù)據(jù)類型、引用數(shù)據(jù)類型）及堆和棧的區(qū)別分析
這篇文章主要介紹了JS數(shù)據(jù)類型（基本數(shù)據(jù)類型、引用數(shù)據(jù)類型）及堆和棧的區(qū)別,結合實例形式分析了JS基本數(shù)據(jù)類型、引用數(shù)據(jù)類型概念、用法,以及堆和棧的區(qū)別,需要的朋友可以參考下2020-03-03
在論壇里經(jīng)常看到人問選項卡或者類似選項卡的切換效果 這里封裝了個js，希望對大家有用 所有代碼都在下面了 如果有錯誤或者建議，可以回貼告訴我，謝謝2008-02-02
這篇文章主要介紹了JavaScript 作用域的相關資料，文中講解非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
本篇文章主要介紹了微信小程序開發(fā)經(jīng)驗總結（推薦），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這是一款真正的JavaScript伸展收縮型菜單，鼠標放上看一看，是不是很酷？鼠標劃出菜單項的時候，背景會伸長。菜單沒有加鏈接，想用的自己加，再美化一下，絕對夠個性吧。2015-11-11
這篇文章主要介紹了js刷新頁面location.reload()用法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要介紹了JavaScript常見繼承模式,結合實例形式總結分析了javascript原型鏈繼承、構造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承等相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-01-01
js動態(tài)生成form 并用ajax方式提交的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s動態(tài)生成form 并用ajax方式提交的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09