uni-app-x

展示全部

# uni.showModal(options) GitCode GitHub

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

# showModal 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	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	否

# 示例

示例为 alpha 分支：hello uni-app x（alpha）

master 分支：hello uni-app x（master）

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>

# 参见

注意：

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

# uni.hideModal(options?) GitCode GitHub

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

# hideModal 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
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

是

# 参见

# 通用类型

# GeneralCallbackResult

名称

类型

必备

默认值

兼容性

描述

errMsg

string

是

错误信息

运营产品

uni-ad uni统计 uni发行 uni安全专题

开发者服务

问答社区开发者后台

技术文档

uni-app文档 uniCloud文档原生开发者支持文档 HBuilder文档

生态服务

插件市场 OAuth用户开放平台

关于我们： DCloud官网案例需求墙许可协议加入我们赞助我们

联系我们：商务合作：bd@dcloud.io 广告合作：uniad@dcloud.io

DCloud.io 数字天堂（北京）网络技术有限公司是

HTML5中国产业联盟发起单位

京公网安备：11010802035340号

国家信息安全等级保护三级，证书编号：11010813802-20001

# uni.showModal(options) GitCode GitHub

# showModal 兼容性

# 参数

# UniShowModalResult 的属性值

# UniShowModalFail 的属性值

# 返回值

# 示例

# 参见

# uni.hideModal(options?) GitCode GitHub

# hideModal 兼容性

# 参数

# UniHideModalFail 的属性值

# 参见

# 通用类型

# GeneralCallbackResult

本页导读