模态框wx.showModal

最新推荐文章于 2024-08-15 23:03:45 发布

gyuei

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量844

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/gyueh/article/details/102522371

版权

小程序专栏收录该内容

67 篇文章 6 订阅

订阅专栏

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

小程序组件(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: "取消",辅助操作按钮文字