小程序中怎么自定义showmodal弹出框-创新互联
小编给大家分享一下小程序中怎么自定义showmodal弹出框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司是一家集网站建设,高陵企业网站建设,高陵品牌网站建设,网站定制,高陵网站建设报价,网络营销,网络优化,高陵网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。最近一直忙着修改bug 增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义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弹出框-创新互联
标题URL:http://pwwzsj.com/article/cegijo.html