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

在上方弹出

wxml

<view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}">   <view class="zan-dialog__mask" bindtap="toggleDialog" />   <view class="zan-dialog__container">     <view style="padding: 100px 0; text-align: center;">Dialog内容</view>   </view></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 class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}">     <view class="zan-dialog__mask" bindtap="toggleDialog" />     <view class="zan-dialog__container">       <view style="padding: 100px 0; text-align: center;">Dialog内容</view>     </view>   </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弹出框的实现代码的详细内容，更多内容请关注技术你好其它相关文章！