在百度小程序里处理对话框，第一反应是去看官方文档里的“showModal”或者“showToast”。但实际开发中你会发现，这些原生弹窗的样式和交互非常受限——比如你没法在弹窗里加一个输入框让用户填写反馈，或者弹出一个带进度条的操作确认框。这时候就需要自己动手写一套自定义对话框组件。

一、原生对话框的“坑”与突破点

先说说官方提供的 swan.showModal。它的参数只有标题、内容、确认/取消按钮文字和颜色。如果你需要“输入框+复选框+进度条”的复合弹窗，原生API完全做不到。更麻烦的是，在iOS设备上，showModal 的按钮点击回调有时会延迟几百毫秒，导致用户觉得“卡了一下”。

有个实际案例：某电商小程序在支付前需要弹窗让用户勾选“我已阅读协议”，用原生弹窗只能显示纯文本，用户无法勾选。最后他们自己写了一个自定义弹窗组件，用 checkbox 组件+蒙层实现，才解决了问题。

二、手写一个“能干活”的自定义对话框

核心思路是用 position: fixed 的蒙层覆盖整个页面，再用 z-index: 9999 把弹窗内容浮在蒙层上方。这里有个关键点：蒙层的 background-color 建议用 rgba(0,0,0,0.5)，而不是 opacity，否则蒙层内的子元素也会变透明。

代码结构分三块：
1. 蒙层（点击可关闭弹窗）
2. 弹窗容器（白色圆角卡片）
3. 内容区（可插入任意组件）

举个带输入框的例子：

<view class="dialog-mask" bindtap="closeDialog"></view>
<view class="dialog-container">
  <view class="dialog-title">请输入反馈</view>
  <input class="dialog-input" placeholder="写下你的建议..." bindinput="onInput"></input>
  <view class="dialog-btns">
    <button bindtap="cancel">取消</button>
    <button bindtap="confirm">提交</button>
  </view>
</view>

注意：bindtap="closeDialog" 如果绑在蒙层上，用户点击弹窗内部时也会触发关闭（因为事件冒泡）。解决办法是在弹窗容器上加上 catchtap="stopPropagation"，阻止事件向上传递。

三、让对话框“有生命”的动画技巧

很多开发者的自定义弹窗只是“啪”一下出现，用户会觉得生硬。用 animation 属性可以解决。百度小程序支持 animation 对象，在弹窗显示时执行一个从 scale(0.8) 到 scale(1) 的弹性动画，同时蒙层透明度从0渐变到0.5。

实现步骤：
1. 在 data 里定义 dialogAnimation: {}
2. 显示弹窗前，用 swan.createAnimation 创建动画实例
3. 设置 scale(0.8).opacity(0).step() 作为起始状态
4. 再设置 scale(1).opacity(1).step({ duration: 300, timingFunction: 'ease-out' })
5. 把动画数据赋值给 dialogAnimation，并在模板里绑定到弹窗容器上

关闭时的动画同理，但要注意：step() 之后要加一个 setTimeout 延迟执行隐藏逻辑，否则动画还没播放完弹窗就消失了。

四、处理“页面滚动”这个老大难

当弹窗出现时，如果用户手指滑动页面，背景内容会跟着滚动——这会让弹窗“浮”在滚动的内容上，体验极差。解决方案是在弹窗显示时，给页面最外层容器加上 overflow: hidden，同时记录当前滚动位置 scrollTop，关闭弹窗时恢复。

具体代码：

// 显示弹窗
const scrollTop = swan.getSystemInfoSync().scrollTop
this.setData({
  isDialogShow: true,
  pageScrollTop: scrollTop
})
// 在模板里：<scroll-view scroll-top="{{pageScrollTop}}" style="overflow: hidden">

// 关闭弹窗
this.setData({
  isDialogShow: false,
  pageScrollTop: 0
})

但有个例外：如果你的页面用的是 swan-page 组件，直接设置 overflow: hidden 可能无效。这时可以用 catchtouchmove 阻止触摸事件传播，但注意这会影响弹窗内部的滚动（比如弹窗里有个长列表）。更优雅的做法是：在弹窗显示时，用 swan.setPageStyle 动态修改页面根节点的样式。

五、实战：一个带“确认+取消+倒计时”的对话框

假设你需要一个“操作不可撤销”的确认弹窗，用户点击确认后按钮开始倒计时3秒，倒计时期间不可再次点击。这个需求在删除重要数据时很常见。

实现逻辑：
1. 弹窗里放两个按钮：确认（默认禁用，显示“确认删除”）和取消
2. 用户点击确认后，确认按钮变成“3秒后可确认”，同时启动 setInterval
3. 每秒更新按钮文字，倒计时归零后按钮恢复可用状态

关键代码片段：

startCountdown() {
  let count = 3
  this.setData({
    confirmDisabled: true,
    confirmText: count + '秒后可确认'
  })
  const timer = setInterval(() => {
    count--
    if (count > 0) {
      this.setData({
        confirmText: count + '秒后可确认'
      })
    } else {
      clearInterval(timer)
      this.setData({
        confirmDisabled: false,
        confirmText: '确认删除'
      })
    }
  }, 1000)
}

这里有个容易被忽略的点：setInterval 在弹窗关闭后依然会执行，导致报错。记得在 closeDialog 方法里 clearInterval(timer)，并且把 timer 保存在 data 中以便访问。

六、与原生API的混合使用场景

不是所有场景都需要自定义。比如简单的“操作成功”提示，用 swan.showToast 就够用。但 showToast 在百度小程序里有个特性：它的 icon 只支持“success”、“loading”和“none”，如果你想显示一个自定义图标（比如红色的“×”），就必须自己写。

混合使用的策略：
- 纯文字提示：用 showToast + icon: 'none'
- 需要用户操作的：用自定义弹窗
- 需要长时间显示的：用自定义弹窗（showToast 默认1.5秒自动消失）

有一个坑：showToast 的 mask 参数设为 true 时可以防止用户点击背后内容，但这个蒙层是半透明的，而且无法自定义样式。如果你需要“全黑蒙层+底部弹出”的效果，还是得自己写。

七、性能优化：避免对话框引起的页面卡顿

自定义弹窗里如果包含大量图片或复杂组件，在显示/隐藏时可能会出现掉帧。一个优化技巧是：用 hidden 属性代替 wx:if。因为 wx:if 会销毁和重建组件，而 hidden 只是控制显示隐藏，组件实例始终存在。

但 hidden 也有缺点：弹窗内容始终占用内存。折中方案是：第一次显示时用 wx:if 创建组件，之后用 hidden 控制显隐。可以用一个 hasShown 变量标记是否已经初始化过。

另外，弹窗里的图片建议用 lazy-load 属性，或者预先把图片压缩到弹窗实际显示尺寸，避免加载原图造成布局抖动。

八、调试对话框的“独门秘籍”

自定义弹窗在真机上经常出现位置偏移，尤其是刘海屏和底部安全区。解决办法是：在弹窗容器上使用 padding-bottom: env(safe-area-inset-bottom)，并且用 swan.getSystemInfo 获取状态栏高度，动态计算弹窗的 top 值。

还有一个很少被提及的点：百度小程序的 swan.showModal 在安卓和iOS上的圆角表现不一致。安卓默认是直角，iOS是圆角。如果你希望统一风格，自定义弹窗的 border-radius 建议设为 12rpx，这个值在两种系统上看起来都比较自然。

最后分享一个排查技巧：如果弹窗在某个特定页面显示异常，检查该页面是否使用了 position: relative 的容器。因为固定定位是相对于视口，但如果父容器有 transform 属性，固定定位会失效。这是CSS的经典坑，百度小程序也不例外。