uni.showModal(options)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。 GitCode GitHub

showModal 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	3.91	4.11	4.11	4.61

参数

名称	类型	必填	默认值	兼容性	描述
options	ShowModalOptions	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -
名称 类型 必备 默认值 兼容性 描述 title string 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 提示的标题 content string 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 提示的内容 showCancel boolean 否 true 是否显示取消按钮，默认为 true - Web 微信小程序 Android iOS HarmonyOS - - - - - cancelText string 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 取消按钮的文字，默认为"取消" cancelColor string.ColorString 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 取消按钮的文字颜色，默认为"#000000" confirmText string 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 确定按钮的文字，默认为"确定" confirmColor string.ColorString 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 确定按钮的文字颜色 editable boolean 否 false - Web 微信小程序 Android iOS HarmonyOS - - - - - 是否显示输入框 placeholderText string 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 显示输入框时的提示文本 success (result: UniShowModalResult) => void 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 接口调用成功的回调函数 fail (result: UniShowModalFail) => void 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 接口调用失败的回调函数 complete (result: any) => void 否 - - Web 微信小程序 Android iOS HarmonyOS - - - - - 接口调用结束的回调函数（调用成功、失败都会执行）

UniShowModalResult 的属性值

名称	类型	必备	默认值	兼容性	描述
content	string	否	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	editable 为 true 时，用户输入的文本
cancel	boolean	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）
confirm	boolean	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	为 true 时，表示用户点击了确定按钮

UniShowModalFail 的属性值

名称	类型	必备	默认值	兼容性	描述
errCode	number	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -
errSubject	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	统一错误主题（模块）名称
data	any	否	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	错误信息中包含的数据
cause	Error	否	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -

返回值

类型	必备
UniPage	否

示例

hello uni-app x

扫码体验（手机浏览器跳转到App直达页）

扫码体验

Template

Script

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-list">
        <radio-group @change="radioChange">
          <radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
            :checked="index === current">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
      <view class="uni-list">
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否显示过长文字</view>
          <switch :checked="showLongContent" @change="showLongContentChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否显示取消按钮</view>
          <switch :checked="showCancelSelect" @change="showCancelChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">定制取消文案</view>
          <switch :checked="cancelTextSelect" @change="cancelTextChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">定制确认文案</view>
          <switch :checked="confirmTextSelect" @change="confirmTextChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">测试非法的颜色</view>
          <switch :checked="illegalColorSelect" @change="illegalColorChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">测试超长的按钮文本</view>
          <switch :checked="illegalButtonTextSelect" @change="illegalButtonTextChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否显示输入框</view>
          <switch :checked="editableSelect" @change="editableChange" />
        </view>
        <view class="uni-list-cell uni-list-cell-pd">
          <view class="uni-list-cell-db">是否定制输入提示词</view>
          <switch :checked="placeholderTextSelect" @change="placeholderTextChange" />
        </view>
      </view>
      <view class="uni-padding-wrap uni-common-mt">
        <text>complete 执行结果：{{ timesShowRet }}</text>
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="primary" @tap="modalTap" id="btn-modal-show">
            modal单次弹出
          </button>
        </view>
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="default" @tap="modalTapTimes" id="btn-modal-show-multitime">
            modal多次弹出
          </button>
        </view>
        <!-- #ifndef MP -->
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="default" @tap="closeAllModal" id="btn-modal-hide-all">
            延迟3s关闭全部弹窗
          </button>
        </view>
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="default" @tap="closeLastModal" id="btn-modal-hide-last">
            延迟3s关闭最后一个弹窗
          </button>
        </view>
        <!-- #endif -->
        <text>
          success/fail 执行结果：{{ exeRet }}
        </text>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

参见

• 相关 Bug
• 参见uni-app x相关文档
• 微信小程序文档
• 支付宝小程序文档
• 百度小程序文档
• 抖音小程序文档
• 飞书小程序文档
• 钉钉小程序文档
• QQ小程序文档
• 快手小程序文档
• 京东小程序文档
• 华为快应用文档
• 360小程序文档

注意：

• App和Web平台，showModal从4.61起重构为使用dialogPage实现。重构后的版本支持暗黑主题、国际化、横屏宽屏适配。

uni.hideModal(options?)

隐藏已弹出的对话框实例，如果 `modalPage` 参数为空，则隐藏当前栈顶全部对话框 GitCode GitHub

hideModal 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.61	-	4.61	4.61	4.61	x

参数

名称	类型	必填	默认值	兼容性	描述
options	HideModalOptions	否	-	Web 微信小程序 Android iOS HarmonyOS - - - - x
名称 类型 必备 默认值 兼容性 描述 modalPage UniPage 否 - Web 微信小程序 Android iOS iOS uni-app x UTS 插件 HarmonyOS 系统版本 HarmonyOS 4.0 x x x x 12 x 期望隐藏的目标modal 如果为null 会关闭当前栈顶全部modal success (result: UniHideModalResult) => void 否 - Web 微信小程序 Android iOS HarmonyOS - - - - x 接口调用成功的回调函数 fail (result: UniHideModalFail) => void 否 - Web 微信小程序 Android iOS HarmonyOS - - - - x 接口调用失败的回调函数 complete (result: any) => void 否 - Web 微信小程序 Android iOS HarmonyOS - - - - x 接口调用结束的回调函数（调用成功、失败都会执行）

UniHideModalFail 的属性值

名称	类型	必备	默认值	兼容性	描述
errCode	number	是	-	Web 微信小程序 Android iOS HarmonyOS - - - - x
errSubject	string	是	-	Web 微信小程序 Android iOS HarmonyOS - - - - x	统一错误主题（模块）名称
data	any	否	-	Web 微信小程序 Android iOS HarmonyOS - - - - x	错误信息中包含的数据
cause	Error	否	-	Web 微信小程序 Android iOS HarmonyOS - - - - x	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	Web 微信小程序 Android iOS HarmonyOS - - - - x

参见

• 相关 Bug
• 参见uni-app x相关文档
• 微信小程序文档
• 支付宝小程序文档
• 百度小程序文档
• 抖音小程序文档
• 飞书小程序文档
• 钉钉小程序文档
• QQ小程序文档
• 快手小程序文档
• 京东小程序文档
• 华为快应用文档
• 360小程序文档

通用类型

GeneralCallbackResult

名称	类型	必备	默认值	兼容性	描述
errMsg	string	是	-	Web 微信小程序 Android iOS HarmonyOS - 4.41 - - -	错误信息