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 插件
4.0	4.41	3.91	3.91	4.11	4.11

# 参数

名称

类型

必填

默认值

兼容性

描述

options

ShowModalOptions

是

uni.showModal 参数定义

名称

类型

必备

默认值

兼容性

描述

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

(res: ShowModalSuccess) => void

否

uni.showModal成功回调函数定义

fail

(res: IPromptError) => void

否

uni.showModal失败回调函数定义

complete

(res: any) => void

否

uni.showModal完成回调函数定义

# ShowModalSuccess 的属性值

名称

类型

必备

默认值

兼容性

描述

confirm

boolean

是

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

cancel

boolean

是

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

content

string

否

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

# IPromptError 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

错误码

合法值	兼容性	描述
1	-	撤销
1001	-	请求参数非法

errSubject

string

是

统一错误主题（模块）名称

data

any

否

错误信息中包含的数据

cause

Error

否

源错误信息，可以包含多个错误，详见SourceError

errMsg

string

是

# 示例

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="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="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">
        <view class="uni-btn-v">
          <button class="uni-btn-v" type="default" @tap="modalTap" id="btn-modal-show">
            modal测试
          </button>
        </view>
        <text>{{ exeRet }}</text>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>