微信小程序自定義純凈模態(tài)框（彈出框）的實(shí)例代碼
由于官方API提供的模態(tài)框只能顯示簡(jiǎn)單的文字，但是在實(shí)際應(yīng)用場(chǎng)景中，我們需要模態(tài)框上能夠顯示各種各樣的組件和樣式，所以，以此為基礎(chǔ)模擬出一套可以供大家自定義的純凈版的模態(tài)框，滿足大家各式各樣的需求。
效果圖：
WXML:
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
這一塊區(qū)域?yàn)閺棾隹騼?nèi)容區(qū)域，根據(jù)自己的業(yè)務(wù)進(jìn)行自定義布局
</view>
WXSS:
/* 模態(tài)框 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
}
.modal-dialog {
box-sizing:border-box;
width: 85%;
padding:30rpx;
overflow: hidden;
position: fixed;
top: 20%;
left: 0;
right: 0;
margin: 0 auto;
z-index: 9999;
background: white;
border-radius: 5rpx;
}
JS:
data: {
showModal: false, //false關(guān)閉模態(tài)框 true開啟模態(tài)框
},
/**
* 彈出框蒙層截?cái)鄑ouchmove事件
*/
preventTouchMove: function () {
},
/**
* 隱藏模態(tài)對(duì)話框
*/
hideModal() {
var that = this;
that.setData({
showModal: false,
})
},
開啟模態(tài)框，只需要在標(biāo)簽上綁定一個(gè)事件，將data里的showModal置為true即可。
此為最純凈的版本，個(gè)人經(jīng)常使用，遂發(fā)出來，希望能夠加快大家的開發(fā)效率。
到此這篇關(guān)于微信小程序自定義純凈模態(tài)框（彈出框）的實(shí)例代碼的文章就介紹到這了,更多相關(guān)微信小程序自定義 模態(tài)框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標(biāo)和顏色的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
這篇文章主要介紹了JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集,以實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加下拉菜單及響應(yīng)鼠標(biāo)事件生成菜單等實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09
Bootstrap導(dǎo)航條學(xué)習(xí)使用(二)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法第二篇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript調(diào)用ajax獲取文本文件內(nèi)容實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript調(diào)用ajax獲取文本文件內(nèi)容的方法,需要的朋友可以參考下2014-03-03
JavaScript實(shí)現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中，將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個(gè)常見的需求。本篇博客將介紹五種常用的方法來實(shí)現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu)，希望對(duì)大家有所幫助2023-03-03
詳解vue.js根據(jù)不同環(huán)境(正式、測(cè)試)打包到不同目錄
這篇文章主要介紹了詳解vue.js根據(jù)不同環(huán)境(正式、測(cè)試)打包到不同目錄，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
javascript實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
JS判斷頁面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼
JS判斷頁面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫的代碼廢話少說，直接貼代碼！有注釋2012-10-10
這篇文章主要介紹了webpack之devtool詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02