1.模态框

<view class="modalBox">
  <button bindtap="modalFunc">modal模态框</button>
  <button bindtap="createModal">动态创建模态框</button>
</view>     
<!-- 提示框 -->
<modal title="提示" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirmFunc" bindcancel="cancelFunc">  
  是否确认提交？  
</modal>

data: {
    //false显示，true为隐藏
    modalHidden:true
  },
  // 模态框出现
  modalFunc:function(){
    // 显示提示框
    this.setData({
      modalHidden: false
    });
  },
  // 动态创建模态框
  createModal:function(){
    wx.showModal({
      title: '动态创建模态框',
      content: '本框测试用的哈',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  // 确认函数
  confirmFunc:function(){
    console.log("点击了确认！");
    // 关闭提示框
    this.setData({
      modalHidden: true
    });
  },
  // 取消函数
  cancelFunc:function(){
    console.log("点击了取消！");
      // 关闭提示框
    this.setData({
      modalHidden: true
    });
  },

效果图：

2.提示框

<view class="modalBox">
  <button bindtap="toastFunc">toast提示框</button>
   <button bindtap="createToast">动态创建toast提示框</button>
</view>     


<!-- 提示框 -->
  <toast hidden="{{toastHidden}}">提交成功</toast>

data: {
     //false显示，true为隐藏
    toastHidden:true
  },

  // 提示框出现
  toastFunc:function(){
    // 显示提示框
    this.setData({
      toastHidden: false
    });

    // 两秒后提示框消失
    var that = this;
    setTimeout(function(){
      that.setData({
        toastHidden: true
      });
    },2000);

  },

  // 动态创建提示框
  createToast:function(){
     wx.showToast({
       title: '设置成功',
     })
  },

效果图：