小程序中怎么自定义showmodal弹出框 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下小程序中怎么自定义showmodal弹出框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

最近一直忙着修改错误增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义showmodal框吧

　　　　<视图类=' useralert_huiyuan '> {{uservip}} 　　<视图类=' useralert_quanyi '>享受以下会员权益　　<视图类=' fenggexian '> 　　<视图类=' vipinfo '> {{vipinfo}} 　　<视图类=' shutalert bindtap=>“走” 　　<图像src=" http://pbqyqto63.bkt.clouddn.com/%E9%94%99%E5%8F%B7.png "> 　　　　

wxs部分

.mask { 　　宽度:100%; 　　高度:100%; 　　位置:,固定; 　　顶部:0; 　　左:0; 　　背景:# 000; 　　z - index: 9000; 　　透明度:0.7; 　　} 　　.modalDlg { 　　宽度:550 rpx; 　　身高:520 rpx; 　　位置:,固定; 　　前:25%; 　　z - index: 9999; 　　保证金:0 rpx 100 rpx 185 rpx 100 rpx; 　　background - color: # fff; 　　border - radius: 36 rpx; 　　显示:flex; 　　flex-direction:列; 　　对齐项目:中心; 　　}

其中面具是遮罩层样式

modalDlg是弹出去的容器样式

其他的就是很随意的,自己想写什么写什么。

.img_wrap { 　　宽度:130 rpx; 　　身高:130 rpx; 　　背景:,白色; 　　这个特性:50%; 　　边界:1 px solid # 0097 ff; 　　保证金:0 rpx 汽车; 　　位置:绝对的; 　　上图:,-65 rpx; 　　margin-bottom: 30 rpx; 　　} 　　{.img_wrap 图像　　宽度:100 rpx; 　　身高:100 rpx; 　　padding-top: 15 rpx; 　　padding-left: 15 rpx; 　　保证金:0 rpx 汽车; 　　} 　　.useralert_huiyuan 　　{ 　　字体大小:13 px; 　　rpx margin-top: 100; 　　} 　　.useralert_quanyi 　　{ 　　字体大小:13 px; 　　颜色:,darkgray; 　　} 　　.fenggexian { 　　宽度:100%; 　　margin-top: 50 rpx; 　　边界底部:1 px solid # e8e8e8; 　　} 　　.vipinfo { 　　margin-top: 30 rpx; 　　颜色:# 6698 ff; 　　字体大小:11 px; 　　} 　　, 　　.shutalert { 　　宽度:110 rpx; 　　保证金:0 rpx 汽车　　} 　　{.shutalert 图像　　宽度:100 rpx; 　　身高:100 rpx; 　　位置:绝对的; 　　底部:-120 rpx; 　　}

其中面具是遮罩层样式

modalDlg是弹出去的容器样式

其他的就是很随意的,自己想写什么写什么。

js部分

[]在数据里定义一个showModal:假的,初始一定为假

我是因为需要分开写了两个方法来控制开关,比较死板,这样的

提交:,()函数,{ 　　this.setData ({ 　　showModal:真实　　}) 　　}, 　　:,()函数,{ 　　this.setData ({ 　　showModal:假　　}) 　　},

有一种更直接的

可以一个方法控制开关,也可用于面具遮罩层,点击遮罩层,关闭

在此我随意写下

在数据里定义一个showalert:假

方法: