快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)一個(gè)自定義遮罩層效果

更新時(shí)間：2023年09月08日 09:40:37 作者：與f

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個(gè)自定義遮罩層,大概效果是點(diǎn)擊按鈕Show顯示遮罩層,再次點(diǎn)擊屏幕任何地方隱藏遮罩層,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

正文：

先上效果圖: 點(diǎn)擊按鈕Show顯示遮罩層,再次點(diǎn)擊屏幕任何地方隱藏遮罩層;

<button bindtap="showview">Show</button>
<view class="bg" bindtap='hideview' style='display:{{display}}'></view>
<view class="show" bindtap='hideview' style='display:{{display}}'>申請(qǐng)成功
<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)一個(gè)自定義遮罩層的文章就介紹到這了,更多相關(guān)小程序自定義遮罩層內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)左側(cè)滑欄過程解析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑欄過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
Autocomplete Textbox Example javascript實(shí)現(xiàn)自動(dòng)完成成功
Autocomplete Textbox Example javascript實(shí)現(xiàn)自動(dòng)完成成功...
2007-08-08
JS數(shù)據(jù)類型（基本數(shù)據(jù)類型、引用數(shù)據(jù)類型）及堆和棧的區(qū)別分析
這篇文章主要介紹了JS數(shù)據(jù)類型（基本數(shù)據(jù)類型、引用數(shù)據(jù)類型）及堆和棧的區(qū)別,結(jié)合實(shí)例形式分析了JS基本數(shù)據(jù)類型、引用數(shù)據(jù)類型概念、用法,以及堆和棧的區(qū)別,需要的朋友可以參考下
2020-03-03
一個(gè)js封裝的不錯(cuò)的選項(xiàng)卡效果代碼
在論壇里經(jīng)?？吹饺藛栠x項(xiàng)卡或者類似選項(xiàng)卡的切換效果這里封裝了個(gè)js，希望對(duì)大家有用所有代碼都在下面了如果有錯(cuò)誤或者建議，可以回貼告訴我，謝謝
2008-02-02
詳解JavaScript 作用域
這篇文章主要介紹了JavaScript 作用域的相關(guān)資料，文中講解非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
微信小程序開發(fā)經(jīng)驗(yàn)總結(jié)（推薦）
本篇文章主要介紹了微信小程序開發(fā)經(jīng)驗(yàn)總結(jié)（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
javascript伸縮型菜單實(shí)現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單，鼠標(biāo)放上看一看，是不是很酷？鼠標(biāo)劃出菜單項(xiàng)的時(shí)候，背景會(huì)伸長(zhǎng)。菜單沒有加鏈接，想用的自己加，再美化一下，絕對(duì)夠個(gè)性吧。
2015-11-11
js刷新頁(yè)面location.reload()用法詳解
這篇文章主要介紹了js刷新頁(yè)面location.reload()用法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
JavaScript常見繼承模式實(shí)例小結(jié)
這篇文章主要介紹了JavaScript常見繼承模式,結(jié)合實(shí)例形式總結(jié)分析了javascript原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承等相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-01-01
js動(dòng)態(tài)生成form 并用ajax方式提交的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s動(dòng)態(tài)生成form 并用ajax方式提交的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09