小程序弹窗

最新推荐文章于 2024-08-15 23:03:45 发布

itfallrain

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量309

点赞数

分类专栏：微信小程序

本文为博主原创文章，未经博主同意不得转载

本文链接：https://blog.csdn.net/qq_38215042/article/details/87690593

版权

微信小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

test.js

data: {
    modalHidden: true,
    },
  /**
     * 显示弹窗
     */
  buttonTap: function () {
    this.setData({
      modalHidden: false
    })
  },
  /**
   * 点击取消
   */
  modalCandel: function () {
    // do something
    this.setData({
      modalHidden: true
    })
  },

test.wxml

//点击显示弹窗
  <view class="nav_link nav_link1" bindtap='buttonTap'>
    <button class="defalut_btn" bindtap='gotoMessages'>
    <text class="txt">租书</text>
    </button>
  </view>
  //点击关闭弹窗
  <view class='tright-top' bindtap='modalCandel'>
        <image src='../images/guanbi.png'></image>
   </view>
 //弹窗开始
<view class='newpopup' hidden="{{modalHidden}}">

<view class=' popup' >
//在里面写弹窗内容
</view>
</view>
//弹窗结束

test.wxss

.newpopup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
}

.popup {
  padding: 0 30rpx 100rpx 30rpx;
  border-radius: 20rpx;
  background: #fff;
  position: absolute;
  top: 47%;
  left: 20%;
  margin-left: -150rpx;
  margin-top: -240rpx;
}