uni.showModal(options) @showmodal

展示全部

# uni.showModal(options)

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

# showModal 兼容性

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

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowModalOptions

是

名称

类型

必备

默认值

兼容性

描述

title

string

否

提示的标题

content

string

否

提示的内容

showCancel

boolean

否

true
是否显示取消按钮，默认为 true

cancelText

string

否

取消按钮的文字，默认为"取消"

cancelColor

string.ColorString

否

取消按钮的文字颜色，默认为"#000000"

confirmText

string

否

确定按钮的文字，默认为"确定"

confirmColor

string.ColorString

否

确定按钮的文字颜色

editable

boolean

否

false

是否显示输入框

placeholderText

string

否

显示输入框时的提示文本

success

(result: UniShowModalResult) => void

否

接口调用成功的回调函数

fail

(result: UniShowModalFail) => void

否

接口调用失败的回调函数

complete

(result: any) => void

否

接口调用结束的回调函数（调用成功、失败都会执行）

# UniShowModalResult 的属性值

名称

类型

必备

默认值

兼容性

描述

content

string

否

editable 为 true 时，用户输入的文本

cancel

boolean

是

为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

confirm

boolean

是

为 true 时，表示用户点击了确定按钮

# UniShowModalFail 的属性值

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

# 返回值

类型	必备
UniPage	否

# 示例

hello uni-app x

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>
        <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>
        <text>
          success/fail 执行结果：{{ exeRet }}
        </text>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

# 参见

注意：

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

# uni.hideModal(options?)

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

# hideModal 兼容性

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

# 参数

名称

类型

必填

默认值

兼容性

描述

options

HideModalOptions

否

名称	类型	必备	默认值	兼容性	描述
modalPage	UniPage	否	-	-	期望隐藏的目标modal 如果为null 会关闭当前栈顶全部modal
success	(result: UniHideModalResult) => void	否	-	-	接口调用成功的回调函数
fail	(result: UniHideModalFail) => void	否	-	-	接口调用失败的回调函数
complete	(result: any) => void	否	-	-	接口调用结束的回调函数（调用成功、失败都会执行）

# UniHideModalFail 的属性值

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