模态框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"按钮被按下去的样式 -->

css部分

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

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('你点击了取消')
        }
      }
    });
  },

拓展:
在这里插入图片描述

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值