大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

小程序中怎么自定义showmodal弹出框-创新互联

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

成都创新互联公司是一家集网站建设,高陵企业网站建设,高陵品牌网站建设,网站定制,高陵网站建设报价,网络营销,网络优化,高陵网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

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

小程序中怎么自定义showmodal弹出框

废话少说直接上代码

wxml部分






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弹出框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻标题:小程序中怎么自定义showmodal弹出框-创新互联
当前地址:http://dzwzjz.com/article/cegijo.html
在线咨询
服务热线
服务热线:028-86922220
TOP