uni.showModal(options) @showmodal

# uni.showModal(options)

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

# showModal 兼容性

Web	微信小程序	Android	iOS
4.0	-	3.9.0	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>