自定义小程序showModal对话框

小程序自定义对话框的书写

html部分

<view class="modal-mask" bindtap="hideModalC" wx:if="{{showModelConflict}}"></view>

 <view class="modal-dialog" wx:if="{{showModelConflict}}">
        
   <view class="modal-title">弹窗标题</view>
   <view class="modal-content">
     <view class="weui-cells weui-cells_after-title passItem" style="background-color:transparent">
       <view class="weui-cell ">
          <view class="weui-cell__bd">
                    弹窗内容
          </view>
       </view>
     </view>
   </view>
</view>
        <!-- 按钮 -->
<view class="myui-cell-bottom" style="font-size:16px;margin-top:10rpx;">
     <view class="myui-cell-bottom__bd myui-center dangeColor"  bindtap="cancelPass">取消</view>
     <view class="myui-cell-bottom__fd myui-center"   bindtap="confirmPass">确定</view>
 </view>
</view>

css

/* model弹窗 */
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.3;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 40%;
  left: 0;
  z-index: 9999;
  background: #f9f9f9;
  margin: -180rpx 105rpx;
  border-radius: 20rpx;
  padding: 30rpx 20rpx 10rpx;
}

.modal-title {
  padding: 0rpx 20rpx 10rpx;
  font-size: 36rpx;
  color: #030303;
}

.modal-content {
  padding: 10rpx 20rpx 10rpx;
}

.listItem {
  padding: 0 20rpx ;
  margin-top: 20rpx;
  box-sizing: border-box;
}

.dangeColor {
  color: #EA1932;
}
.passColor{
  color: #65D580;
}

.time {
  font-size: 24rpx;
  text-align: right;
}
.passItem:after{
  border-bottom: none;
}

注意: 样式有引用weui的样式,
地址: https://github.com/weui/weui-wxss

js

data:{
 showModelConflict:false
	
},
hideModalC(){
 this.setData({
    showModelConflict: false
  })
},
cancelPass(){
 this.hideModalC()
 this.triggerEvent( 'cancelThisMeet', {id: '000'})
},
confirmPass(e){
  this.hideModalC()
  this.triggerEvent( "comfirmThisMeet", {id: e })
},