微信小程序自定义modal模态框

1.目录结构

2.index.json

{
    "component": true
  }

3. index.wxml

<view wx:if='{{showModal}}'>
  <view class='mask_layer' />
  <view class='modal_box'>
    <view class="title">{{title}}</view>
    <view class='content'>
      <text class='modalMsg'>{{content}}</text>
      <!-- <textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea> -->
    </view>
    <view class='btn1'>
      <view bindtap='modal_click_Hidden' class='cancel'>{{cancelText}}</view>
      <view bindtap='Sure' class='Sure'>{{sureText}}</view>
    </view>
  </view>
</view>

 4.index.wxss

.mask_layer {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    left:0;
    top:0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
  }
  .modal_box {
    width: 79%;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 1001;
    background: #fff;
    margin: -150px 12% 0 12%;
    border-radius: 28rpx;
    font-size: 32rpx;
  }
   
  .title {
    padding: 15px;
    text-align: center;
    font-weight: bold;
  }
   
  .content {
    overflow-y: scroll; /*超出父盒子高度可滚动*/
    color: #999;
    padding: 10rpx 20rpx;
  }
   
   .input_show1{
     margin: 0 auto;
     width: 80%;
     margin-left: 10%;
     font-size: 32rpx;
     text-align: center;
   }
  .btn1 {
    width: 100%;
    margin-top: 65rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: white;
    border-top:1px solid #eee;
    font-weight: bolder;
  }
   
  .cancel {
    width: 100%;
    padding: 10px;
    text-align: center;
    color: black;
  }
   
  .Sure {
    width: 100%;
    padding: 10px;
    color: #ffd302;
    background-color: white;
    border-left: 1px solid #eee;
    text-align: center;
  }
   
  .modalMsg {
    text-align: center;
    /* margin-top: 45rpx; */
    display: block;
  }

5.index.js

Component({  
    options: {  
      multipleSlots: true // 在组件定义时的选项中启用多slot支持  
    },  
    /** 
     * 组件的属性列表 
     */  
    properties: {  
       showModal: {
            type: Boolean,
            value: 'false'
       },     
        title: {
            type: String,
            value: '提示'
       }, 
       content:{
            type: String,
            value: '内容'
        },  
        cancelText: {
            type: String,
            value: '取消'
       },     
        sureText: {
            type: String,
            value: '确定'
       },
    },  
    /** 
     * 组件的初始数据 
     */  
    data: {  
        
    },  
    /** 
     * 组件的方法列表 
     */  
    methods: {  
          modal_click_Hidden: function () {
            this.setData({
              showModal: false,
            })
          },
          // 确定
          Sure: function () {
            this.triggerEvent('handleSureBtn')
          }, 
    }  
  })  
  

6.需要引用组件的页面

json页面

"usingComponents": {
    "myModal":"/components/modal/index"
  },

wxml页面

<myModal showModal="{{showModal}}"
         content="{{modalContent}}" 
         cancelText="{{modalCancelText}}" 
         sureText="{{modalSureText}}" 
         bindhandleSureBtn="handleSureBtn"
         bindhandleCancelBtn="handleCancelBtn"
         ></myModal>