微信小程序自定義模態(tài)框
更新時(shí)間：2022年07月05日 09:31:02 作者：A~小鯨喜
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序自定義模態(tài)框的具體代碼，供大家參考，具體內(nèi)容如下
效果展示
可在模態(tài)框中添加圖片輸入框
代碼展示-wxml
<button class="show-btn" bindtap="showDialogBtn">彈窗</button>
? ? <view
? ? ? class="modal-mask"
? ? ? bindtap="hideModal"
? ? ? catchtouchmove="preventTouchMove"
? ? ? wx:if="{{showModal}}"
? ? ></view>
? ? <!-- 成功 -->
? ? <view class="modal-dialog" wx:if="{{showModal && ses}}">
? ? ? <view class="modal-img">
? ? ? ? <image src="/image/indexImg/sesImg.png" mode="widthFix" />
? ? ? </view>
? ? ? <view class="modal-title">恭喜你，成功加入班級</view>
? ? ? <view class="modal-footer">
? ? ? ? <view
? ? ? ? ? class="btn-confirms"
? ? ? ? ? bindtap="onConfirm"
? ? ? ? ? data-status="confirm"
? ? ? ? ? data-name="{{name}}"
? ? ? ? >確定
? ? ? ? </view>
? ? ? </view>
</view>代碼展示-wxss
/**index.wxss**/
? ? .show-btn {
? ? ? ? margin-top: 100rpx;
? ? ? ? color: #22cc22;
? ? }
?
? ? .modal-mask {
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? position: fixed;
? ? ? ? top: 0;
? ? ? ? left: 0;
? ? ? ? background: #000;
? ? ? ? opacity: 0.5;
? ? ? ? overflow: hidden;
? ? ? ? z-index: 9000;
? ? ? ? color: #fff;
? ? }
?
? ? .modal-dialog {
? ? ? ? width: 540rpx;
? ? ? ? overflow: hidden;
? ? ? ? position: fixed;
? ? ? ? top: 50%;
? ? ? ? left: 0;
? ? ? ? z-index: 9999;
? ? ? ? background: #f9f9f9;
? ? ? ? margin: -180rpx 105rpx;
? ? ? ? border-radius: 8px;
? ? }
?
? ? .modal-title {
? ? ? ? padding-top: 30rpx;
? ? ? ? padding-bottom: 30rpx;
? ? ? ? font-size: 14px;
? ? ? ? color: #030303;
? ? ? ? text-align: center;
? ? }
?
? ? .modal-img {
? ? ? ? width: 40px;
? ? ? ? height: 40px;
? ? ? ? margin: 0 auto;
? ? ? ? margin-top: 20rpx;
?
? ? ? ? image {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? }
?
?
? ? .modal-footer {
? ? ? ? display: flex;
? ? ? ? flex-direction: row;
? ? ? ? height: 86rpx;
? ? ? ? border-top: 1px solid #dedede;
? ? ? ? font-size: 34rpx;
? ? ? ? line-height: 86rpx;
? ? }
?
? ? .btn-cancel {
? ? ? ? width: 50%;
? ? ? ? color: #8f8f8f;
? ? ? ? background-color: #f2f2f2;
? ? ? ? text-align: center;
? ? ? ? border-right: 1px solid #dedede;
? ? }
?
? ? .btn-confirm {
? ? ? ? width: 50%;
? ? ? ? color: #8f8f8f;
? ? ? ? background-color: #f2f2f2;
? ? ? ? text-align: center;
? ? }
?
? ? .btn-confirms {
? ? ? ? width: 100%;
? ? ? ? background-color: #f2f2f2;
? ? ? ? color: #8f8f8f;
? ? ? ? text-align: center;
? ? }代碼展示-js
var app = getApp()
Page({
? data: {
? ? showModal: false,
? ? // 成功
? ? ses:true,
? },
? onLoad: function () {},
? /**
? ?* 彈窗
? ?*/
?
? showDialogBtn: function () {
? ? this.setData({
? ? ? showModal: true
? ? })
? },
? /**
? ?* 彈出框蒙層截?cái)鄑ouchmove事件
? ?*/
? preventTouchMove: function () {},
? /**
? ?* 隱藏模態(tài)對話框
? ?*/
? hideModal: function () {
? ? this.setData({
? ? ? showModal: false
? ? });
? },
? /**
? ?* 對話框取消按鈕點(diǎn)擊事件
? ?*/
? onCancel: function () {
? ? this.hideModal();
? },
? /**
? ?* 對話框確認(rèn)按鈕點(diǎn)擊事件
? ?*/
? onConfirm: function (e) {
? ? console.log(e.currentTarget.dataset.name);
? ? this.hideModal();
? }
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS驗(yàn)證input輸入框（字母，數(shù)字，符號，中文）
本文主要介紹了JS驗(yàn)證input輸入框（字母，數(shù)字，符號，中文）的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
Data()日期對象是一個(gè)構(gòu)造函數(shù),必須使用new來調(diào)用創(chuàng)建我們的日期對象,下面這篇文章主要給大家介紹了關(guān)于JS中Date的一些常用方法,需要的朋友可以參考下2022-10-10
細(xì)說JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)
本文主要介紹了細(xì)說JS數(shù)組遍歷的一些細(xì)節(jié)及實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
兼容FF和IE的動(dòng)態(tài)table示例自寫
Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格的文章有很多，但大多數(shù)都不兼容FF和IE，于是手寫了一個(gè)，經(jīng)測試效果還不錯(cuò)，特此與大家分享，感興趣的朋友不要錯(cuò)過2013-10-10
都說 JavaScript 是一種很靈活的語言，這其實(shí)也可以說它是一個(gè)混亂的語言。它把函數(shù)式編程和面向?qū)ο缶幊挑酆弦黄?，再加上?dòng)態(tài)語言特性，簡直強(qiáng)大無比，下面小編給大家介紹Javascript中this詳解，需要的小伙伴可以來參考下2015-09-09
javascript 得到文件后綴名的思路及實(shí)現(xiàn)
在上傳文件時(shí)，常常要對文件的類型即對文件的后綴名進(jìn)行判斷，用javascript可以很容易的做到這一點(diǎn)。用Javascript解析一個(gè)帶絕對路徑的文件名并得到后綴名的方法有很多種，這里列出一種，以供參考。2013-07-07
js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果
本文主要介紹了js實(shí)現(xiàn)彩色條紋滾動(dòng)條效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
JavaScript計(jì)時(shí)器用法分析【setTimeout和clearTimeout】
這篇文章主要介紹了JavaScript計(jì)時(shí)器用法,結(jié)合實(shí)例形式分析了setTimeout和clearTimeout函數(shù)的具體使用技巧,需要的朋友可以參考下2017-01-01
js控制滾動(dòng)條緩慢滾動(dòng)到頂部實(shí)現(xiàn)代碼
滾動(dòng)條緩慢滾動(dòng)到頂部這樣的效果想必大家在瀏覽網(wǎng)頁的時(shí)候都有見過吧，本文使用js實(shí)現(xiàn)下，感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你2013-03-03
JS判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)
下面小編就為大家?guī)硪黄狫S判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11