wx.showModal(模态框)的相关设置

小程序模态对话框

  1. 显示确定按钮和取消按钮

在这里插入图片描述

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

2.不显示取消按钮

在这里插入图片描述

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',确定按钮的颜色

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在小程序中,不支持直接设置 `wx.showModal` 模态框的背景颜色。不过你可以在模态框显示时,给整个页面的背景色设置为黑色,从而达到模态框背景变黑的效果。 下面是示例代码: ```css /* 在 app.wxss 或者需要设置背景色的页面的 wxss 文件中添加以下样式 */ .page-background { background-color: #000000; } ``` ```javascript // 在需要显示模态框的页面的 js 文件中添加以下代码 wx.showModal({ title: '提示', content: '这是一个模态框', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } }, // 在模态框显示时,给整个页面的背景色设置为黑色 show() { wx.pageScrollTo({ scrollTop: 0, duration: 0 }) wx.setBackgroundColor({ backgroundColor: '#000000', success() { wx.nextTick(() => { wx.createSelectorQuery().select('.page').boundingClientRect((rect) => { wx.top = rect.top wx.height = rect.height wx.getSystemInfo({ success(res) { if (res.statusBarHeight && res.platform == 'android') { wx.top = wx.top - res.statusBarHeight wx.height = wx.height + res.statusBarHeight } wx.getMenuButtonBoundingClientRect(() => { wx.height = wx.height - (wx.top - res.statusBarHeight) wx.top = wx.top - (wx.top - res.statusBarHeight) wx.createSelectorQuery().select('.page-background').boundingClientRect((rect) => { wx.height -= rect.height wx.top += rect.height wx.setBackgroundColor({ backgroundColor: '#000000', success() { wx.nextTick(() => { wx.createSelectorQuery().select('.page-content').boundingClientRect((rect) => { wx.height -= rect.height wx.top += rect.height wx.setBackgroundColor({ backgroundColor: '#000000', success() { wx.nextTick(() => { wx.createSelectorQuery().select('.weui-dialog').boundingClientRect((rect) => { const top = wx.top + wx.height / 2 - rect.height / 2 wx.top = top < wx.top ? wx.top : top wx.setBackgroundColor({ backgroundColor: '#000000', success() { wx.nextTick(() => { wx.createSelectorQuery().select('.weui-dialog').boundingClientRect((rect) => { const top = wx.top + wx.height / 2 - rect.height / 2 wx.top = top < wx.top ? wx.top : top wx.setBackgroundColor({ backgroundColor: '#000000', success() { wx.nextTick(() => { wx.createSelectorQuery().select('.weui-dialog').boundingClientRect((rect) => { const top = wx.top + wx.height / 2 - rect.height / 2 wx.top = top < wx.top ? wx.top : top wx.setBackgroundColor({ backgroundColor: '#000000', }) }).exec() }) } }) }).exec() }) } }) }).exec() }) } }) }).exec() }) } }) }).exec() }) } }) }).exec() }) } }) }, // 在模态框关闭时,恢复页面背景色 complete() { wx.setBackgroundColor({ backgroundColorTop: '#ffffff', backgroundColorBottom: '#ffffff' }) } }) ``` 需要注意的是,这段代码中的选择器 `.page`、`.page-background`、`.page-content` 和 `.weui-dialog` 都是根据实际情况而定,需要根据你的代码中元素的类名来进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值