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

百变鹏仔 6天前 #前端问答

文章标签弹出

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

在上方弹出

wxml

<view>  <view></view>  <view>    <view>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;  }

Page({  data: {    showDialog: false  },//控制 pop 的打开关闭  toggleDialog() {    this.setData({      showDialog: !this.data.showDialog    });  },})

在下方弹出

wxml

  <view>    <view></view>    <view>      <view>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;  }

Page({  data: {    showDialog: false  },//控制 pop 的打开关闭  toggleDialog() {    this.setData({      showDialog: !this.data.showDialog    });  },})

文章推荐

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

在上方弹出

在下方弹出

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）