码迷,mamicode.com
首页 > 微信 > 详细

小程序自定义弹窗

时间:2019-04-20 13:14:25      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:isp   jpg   modal   cat   enter   oat   opacity   back   stat   

wxml

<view class=‘cardNum‘> 
<text catchtap=‘showDialogBtn‘>解除绑定</text>
</view>

<!--弹窗--> <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modal-dialog" wx:if="{{showModal}}"> <view class="modal-content"> 解除板顶后银行卡服务将不可使用 </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="hideModal" data-status="cancel">取消</view> <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view> </view> </view>

wxss

.cardNum text{
background: white;
float: right;
padding: 5rpx 10rpx;
border-radius: 8rpx;
font-size: 24rpx;
color:#a53533;
margin-right: 30rpx;
}

.modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff; } .modal-dialog { width: 540rpx; overflow: hidden; position: fixed; top: 50%; left: 0; z-index: 9999; background: #f9f9f9; margin: -180rpx 105rpx; border-radius: 8rpx; } .modal-content { padding: 50rpx 0rpx; text-align: center; color: #666 } .modal-footer { display: flex; flex-direction: row; height: 86rpx; border-top: 1px solid #dedede; font-size: 32rpx; line-height: 86rpx; } .btn-cancel { width: 50%; color: #666; text-align: center; border-right: 1px solid #dedede; } .btn-confirm { width: 50%; background:#a53533; color: white; text-align: center; }

wxjs

Page({

  data: {
    cardList: [ ],
    showModal: false,

  },

  showDialogBtn: function () {
    var that = this
    that.setData({
      showModal: true
    })
  },
  /**
   * 弹出框蒙层截断touchmove事件
   */
  preventTouchMove: function () {
  },
  /**
   * 隐藏模态对话框
   */
  hideModal: function () {
    var that = this
    that.setData({
      showModal: false
    });
  },
  onLoad: function (options) {

  },
  onShow: function () {

  } 

})

 技术图片

小程序自定义弹窗

标签:isp   jpg   modal   cat   enter   oat   opacity   back   stat   

原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10740331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!