小程序中怎么自定義showmodal彈出框

小編給大家分享一下小程序中怎么自定義showmodal彈出框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近一直忙著修改bug 增加新功能，好久沒總結了，也不知道該總結啥，先寫一個自定義showmodal框吧

廢話少說直接上代碼

wxml部分

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
<view class='img_wrap'>
<image src='http://pbqyqto63.bkt.clouddn.com/%E9%92%BB%E7%9F%B3.png'></image>
</view>
<view class='useralert_huiyuan'>{{uservip}}</view>
<view class='useralert_quanyi'>享受以下會員權益</view>
<view class='fenggexian'></view>
<view class='vipinfo'>{{vipinfo}}</view>
<view class='shutalert' bindtap="go">
<image src='http://pbqyqto63.bkt.clouddn.com/%E9%94%99%E5%8F%B7.png'></image>
</view>
</view>

wxss部分

.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 550rpx;
height: 520rpx;
position: fixed;
top: 25%;
z-index: 9999;
margin: 0rpx 100rpx 185rpx 100rpx;
background-color: #fff;
border-radius: 36rpx;
display: flex;
flex-direction: column;
align-items: center;
}

其中 mask 是遮罩層樣式

modalDlg是彈出去的容器樣式

其他的就是很隨意的，自己想寫什么寫什么。

.img_wrap{
width: 130rpx;
height: 130rpx;
background: white;
border-radius:50%;
border:1px solid #0097ff;
margin: 0rpx auto;
position: absolute;
top: -65rpx;
margin-bottom: 30rpx;
}
.img_wrap image{
width: 100rpx;
height: 100rpx;
padding-top:15rpx;
padding-left:15rpx;
margin: 0rpx auto;
}
.useralert_huiyuan
{
font-size: 13px;
margin-top: 100rpx;
}
.useralert_quanyi
{
font-size: 13px;
color: darkgray;
}
.fenggexian{
width: 100%;
margin-top: 50rpx;
border-bottom:1px solid #e8e8e8;
}
.vipinfo{
margin-top: 30rpx;
color: #6698ff;
font-size: 11px;
}
 
.shutalert{
width: 110rpx;
margin: 0rpx auto
}
.shutalert image{
width: 100rpx;
height: 100rpx;
position: absolute;
bottom: -120rpx;
}

其中 mask 是遮罩層樣式

modalDlg是彈出去的容器樣式

其他的就是很隨意的，自己想寫什么寫什么。

js部分

在data[]里定義一個showModal : false  初始一定為false

我是因為需要分開寫了兩個方法來控制開關，比較死板，這樣的

submit: function() {
this.setData({
showModal: true
})
},
go: function() {
this.setData({
showModal: false
})
},

有一種更直接的

可以一個方法控制開關，也可用于mask遮罩層，點擊遮罩層，關閉

在此我隨意寫下

在data里定義一個showalert : false

方法：

alert: function() {
var that= this;
this.setData({
showalert: !that.data.showalert
})
},

以上是“小程序中怎么自定義showmodal彈出框”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！