模态框wx.showModal

本文通过示例代码详细介绍了小程序模态框文字样式的修改，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1. 小程序组件(Dialog)默认样式如图
   
   2.本文主要实现下图所示的样式
   
   3.代码如下所示：
   html部分

<button form-type='submit' disabled='{{disabled}}' class="submit_btn" bindtap="openConfirm" hover-class="button-hover">确认修改</button>
  <!-- bindtap="openConfirm"按钮被按下去的样式 -->
1
2

css部分

/* 按钮被按下去的颜色 */
.button-hover{
  background-color: #96d3ef;
}
1
2
3
4

js部分

openConfirm: function () {
    wx.showModal({
      title: '提示',
      content: '确认修改为新密码',
      confirmText: "确认",//主操作按钮文字
      cancelText: "取消",//辅助操作按钮文字
      //showCancel: false,//不显示取消按钮
      cancelColor: "#000000",//取消文字的颜色
      confirmColor: '#2ea7e0', //确定文字的颜色
      success: function (res) {
        console.log(res);
        if (res.confirm) {
          console.log('你点击了确认')
        } else if (res.cancel) {
          console.log('你点击了取消')
        }
      }
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

拓展：

wx.showModal({
   title: '提示',
     content: "确认拨打111116吗",//提示内容
     confirmColor: '#2EA7E0',//确定按钮的颜色
     showCancel: false,//不显示取消按钮
      success (res) {
	   if (res.confirm) {
	      console.log('用户点击确定按钮')
	    } else if (res.cancel) {
	      console.log('用户点击取消按钮')
	    }
	  }
   })
1
2
3
4
5
6
7
8
9
10
11
12
13

showCancel: false不显示取消按钮
confirmColor: '#2EA7E0',确定按钮的颜色
content: 'cccccc',提示内容文字
confirmText: "确认",主操作按钮文字
cancelText: "取消",辅助操作按钮文字