小程序popupwindow弹出框的实现代码

本篇文章给大家带来的内容是关于小程序popupwindow弹出框的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

wxml

 view >
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
 view >
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
})
相关推荐：
在微信小程序里添加弹出对话框

微信小程序使用modal组件弹出对话框实例分享
以上就是小程序popupwindow弹出框的实现代码的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。