How to customize the showmodal pop-up box in WeChat applet (with code)-Mini Program Development-php.cn

How to customize the showmodal pop-up box in WeChat applet (with code)

不言

Release： 2018-08-10 14:11:44

Original

7292 people have browsed it

The content of this article is about how to customize the showmodal pop-up box (with code) in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I have been busy fixing bugs and adding new features recently. I haven’t summarized it for a long time, and I don’t know what to summarize. Let’s write a custom showmodal box first

No nonsense and go straight to the code

wxml part

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

Copy after login

wxss part

.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;
}

Copy after login

where mask is the mask layer style

modalDlg is the container that pops up Style

Others are very casual, you can write whatever you want.

.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;
}

Copy after login

Among them, mask is the mask layer style

modalDlg is the pop-up container style

Others are very casual, you can write whatever you want.

js part

Define a showModal in data[]: false The initial value must be false

I wrote two methods separately to control the switch because it is relatively rigid. , such

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

Copy after login

There is a more direct

You can control the switch in one method, and it can also be used for the mask layer. Click on the mask layer to close

Here I am Feel free to write

and define a showalert in data: false

Method:

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

Copy after login

Customize the pop-up box how you want to use it

Related recommendations:

How to implement list rendering multi-layer nested loop in WeChat applet

Use Canvas API in WeChat applet to synthesize poster generation component package

Three methods for WeChat applet to update webview page

The above is the detailed content of How to customize the showmodal pop-up box in WeChat applet (with code). For more information, please follow other related articles on the PHP Chinese website!