原文链接：https://mp.weixin.qq.com/s/23wPVFUGY-lsTiQBtUdhXA

1

概述

由于官方API提供的显示模态弹窗，只能简单地显示文字内容，不能对对话框内容进行自定义，欠缺灵活性，所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。今天我们就分享这样的小教程。希望对大家有所帮助。

不多说了，二当家要上图来啦！

快去拿个小板凳，坐等更多更新

注意：如若需要请联系微信geekxz

2

wxml

弹窗 
     
     
    
        
     
      添加数量
        
     
           
      
              
            
         
        
     
           
      
       取消
           
      
       确定
         
      
    

3

  js

Page({
       data: {
         showModal: false,     },     onLoad: function () {
       },     /**      * 弹窗      */     showDialogBtn: function() {
         this.setData({
           showModal: true       })     },     /**      * 弹出框蒙层截断touchmove事件      */     preventTouchMove: function () {
       },     /**      * 隐藏模态对话框      */     hideModal: function () {
         this.setData({
           showModal: false       });     },     /**      * 对话框取消按钮点击事件      */     onCancel: function () {
         this.hideModal();     },     /**      * 对话框确认按钮点击事件      */     onConfirm: function () {
         this.hideModal();     } })

4   css

.show-btn {
     margin-top: 100rpx;   color: #22cc22; } .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: 36rpx; } .modal-title {
     padding-top: 50rpx;   font-size: 36rpx;   color: #030303;   text-align: center; } .modal-content {
     padding: 50rpx 32rpx; } .modal-input {
     display: flex;   background: #fff;   border: 2rpx solid #ddd;   border-radius: 4rpx;   font-size: 28rpx; } .input {
     width: 100%;   height: 82rpx;   font-size: 28rpx;   line-height: 28rpx;   padding: 0 20rpx;   box-sizing: border-box;   color: #333; } input-holder {
     color: #666;   font-size: 28rpx; } .modal-footer {
     display: flex;   flex-direction: row;   height: 86rpx;   border-top: 1px solid #dedede;   font-size: 34rpx;   line-height: 86rpx; } .btn-cancel {
     width: 50%;   color: #666;   text-align: center;   border-right: 1px solid #dedede; } .btn-confirm {
     width: 50%;   color: #ec5300;   text-align: center; }

以上代码效果

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：

福利二：微信小程序入门与实战全套详细视频教程。

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。