本文編輯：  揚瀏覽 6281 4 版權所有，嚴禁轉載

組件說明:

顯示模態彈窗
wx.showModal(OBJECT)

組件用法：

wxml

<view class="page">
  <view class="page__hd">
    <text class="page__title">modal</text>
    <text class="page__desc">模式對話框</text>
  </view>
  <view class="page__bd">
    <view class="btn-area">
      <button type="default" bindtap="showModel1">簡單設定的modal</button>
      <button type="default" bindtap="showModel2">全部自定義設定的modal2</button>
    </view>
  </view>
</view>

js

Page({
  data: {
  },
  showModel1:function(){
    wx.showModal({
      title: '提示',
      content: '這是一個簡單設置的彈窗',
      success: function(res) {
        if (res.confirm) {
          console.log('用戶點擊確定')
        }
      }
    })
  },
  showModel2:function(){
    wx.showModal({
      title: '提示',
      content: '這是一個設定過全部屬性模態彈窗',
      showCancel: true,
      confirmText:'好的',
      confirmColor:'#FF0000',
      cancelText: '算了',
      cancelColor:'#999999',
      success: function(res) {
        if (res.confirm) {
          console.log('用戶點擊確定');
        }else{
          console.log('用戶點擊取消');
        }
      },
      fail:function(){
        console.log('接口調用失敗');
      },
      complete:function(){
        console.log('接口調用結束')
      }
    })
  },

})

wxss

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}

.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}
.btn-area{
    padding: 0 30px;
}
.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

主要屬性：