小程序popupwindow弹出框怎么实现-创新互联
小编给大家分享一下小程序popupwindow弹出框怎么实现,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联建站是一家集网站建设,关岭企业网站建设,关岭品牌网站建设,网站定制,关岭网站建设报价,网络营销,网络优化,关岭网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。小程序popupwindow弹出框的实现代码
在上方弹出
wxml
Dialog内容
wcss
.zan-dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); display: none; } .zan-dialog__container { position: fixed; top: 0; width: 750rpx; background: white; transform: translateY(-150%); transition: all 0.4s ease; z-index: 12; } .zan-dialog--show .zan-dialog__container { transform: translateY(0); } .zan-dialog--show .zan-dialog__mask { display: block; }
js
Page({ data: { showDialog: false },//控制 pop 的打开关闭 toggleDialog() { this.setData({ showDialog: !this.data.showDialog }); }, })
在下方弹出
wxml
Dialog内容
wcss
.zan-dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); display: none; } .zan-dialog__container { position: fixed; bottom: 0; width: 750rpx; background: white; transform: translateY(150%); transition: all 0.4s ease; z-index: 12; } .zan-dialog--show .zan-dialog__container { transform: translateY(0); } .zan-dialog--show .zan-dialog__mask { display: block; }
js
Page({ data: { showDialog: false },//控制 pop 的打开关闭 toggleDialog() { this.setData({ showDialog: !this.data.showDialog }); }, })
看完了这篇文章,相信你对“小程序popupwindow弹出框怎么实现”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文名称:小程序popupwindow弹出框怎么实现-创新互联
分享链接:http://pwwzsj.com/article/ceggso.html