uni.showModal(options)

展示全部

# 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: ShowModalFail) => void

否

接口调用失败的回调函数

complete

(result: any) => void

否

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

# UniShowModalResult 的属性值

名称

类型

必备

默认值

兼容性

描述

content

string

否

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

cancel

boolean

是

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

confirm

boolean

是

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

# ShowModalFail 的属性值

名称

类型

必备

默认值

兼容性

描述

errCode

number

是

errSubject

string

是

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

data

any

否

错误信息中包含的数据

cause

Error

否

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

errMsg

string

是

# 返回值

类型	必备
UniPage	否

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<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>

<script>
  type ItemType = {
    value : string,
    name : string,
  }
  export default {
    data() {
      return {
        title: 'modal',
        showCancelSelect: false,
        showLongContent: false,
        illegalColorSelect:false,
        illegalButtonTextSelect:false,
        cancelTextSelect: false,
        confirmTextSelect: false,
        editableSelect: false,
        placeholderTextSelect: false,
        exeRet: "",
        lastModal : null as UniPage | null,
        items: [{
          value: '标题',
          name: '有标题'
        },
        {
          value: '',
          name: '无标题'
        },
        {
          value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
          name: '超长标题'
        }
        ] as ItemType[],
        current: 0,
        timesShowRet:[] as Array<any>,
      }
    },
    onLoad() {
      uni.showModal({
        title: "onLoad 调用示例,请手动取消"
      })
    },
    methods: {
      showLongContentChange: function (e : UniSwitchChangeEvent) {
        this.showLongContent = e.detail.value
      },
      illegalColorChange: function (e : UniSwitchChangeEvent) {
        this.illegalColorSelect = e.detail.value
      },
      illegalButtonTextChange: function (e : UniSwitchChangeEvent) {
        this.illegalButtonTextSelect = e.detail.value
      },
      showCancelChange: function (e : UniSwitchChangeEvent) {
        this.showCancelSelect = e.detail.value
      },
      cancelTextChange: function (e : UniSwitchChangeEvent) {
        this.cancelTextSelect = e.detail.value
      },
      confirmTextChange: function (e : UniSwitchChangeEvent) {
        this.confirmTextSelect = e.detail.value
      },
      editableChange: function (e : UniSwitchChangeEvent) {
        this.editableSelect = e.detail.value
      },
      placeholderTextChange: function (e : UniSwitchChangeEvent) {
        this.editableSelect = e.detail.value
        this.placeholderTextSelect = e.detail.value
      },
      radioChange(e : UniRadioGroupChangeEvent) {
        for (let i = 0; i < this.items.length; i++) {
          if (this.items[i].value === e.detail.value) {
            this.current = i;
            break;
          }
        }
      },
      closeLastModal: function () {
        let that = this
        setTimeout(function(){
          uni.hideModal({
            modalPage:that.lastModal,
            success: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            fail: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            complete: (res) => {
              that.timesShowRet.push(res)
            }
          })
        },3000)
      },
      closeAllModal: function () {
        let that = this
        setTimeout(function(){
          uni.hideModal({
            modalPage:null,
            success: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            fail: (res) => {
              that.exeRet = JSON.stringify(res)
            },
            complete: (res) => {
              that.timesShowRet.push(res)
            }
          })
        },3000)

      },
      modalTapTimes: function () {
        // 多次弹出前清空结果集合
        this.timesShowRet = []
        this.modalTap()
        this.modalTap()
        let that = this
        setTimeout(function(){
          that.modalTap()
        },200)
      },
      modalTap: function () {
         // 单次弹出前清空多次结果集合
        this.timesShowRet = []

        let cancelTextVal : string|null = null
        let cancelColorVal = ''
        if (this.cancelTextSelect) {
          cancelTextVal = "修改后的取消文本"
          cancelColorVal = "#ff00ff"
        }else{
          //#ifdef MP
          cancelTextVal = "取消"
          //#endif
        }

        let confirmTextVal : string|null = null
        let confirmColorVal = ''
        if (this.confirmTextSelect) {
          confirmTextVal = "修改后的确定文本"
          confirmColorVal = "#0ff"
        }else{
          //#ifdef MP
          confirmTextVal = "确定"
          //#endif
        }
        let placeholderTextVal = ''
        let contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"

        if (this.showLongContent) {
          contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字原则上可以无限多！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！"
        }
        if (this.placeholderTextSelect) {
          placeholderTextVal = "定制提示信息"
        }
        if (this.illegalColorSelect) {
          cancelColorVal = "#WW00ff"
          confirmColorVal = "#0ffff"
        }
        if (this.illegalButtonTextSelect) {
          confirmTextVal = "超长版文字-修改后的确定文本-超长版本文字"
          cancelTextVal = "超长版文字-修改后的取消文本-超长版本文字"
        }

        let op = {
          title: this.items[this.current].value,
          editable: this.editableSelect,
          placeholderText: placeholderTextVal,
          content: contentVal,
          showCancel: this.showCancelSelect,
          cancelText: cancelTextVal,
          cancelColor: cancelColorVal,
          confirmText: confirmTextVal,
          confirmColor: confirmColorVal,
          success: (res) => {
            this.exeRet = JSON.stringify(res)
          },
          fail: (res) => {
            this.exeRet = JSON.stringify(res)
          },
          complete: (res) => {
            this.timesShowRet.push(res)
          }
        } as ShowModalOptions
        // console.log(op)
        this.lastModal = uni.showModal(op)
      }

    }
  }
</script>

# 参见

注意：

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: HideModalFail) => void

否

接口调用失败的回调函数

complete

(result: any) => void

否

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

# HideModalFail 的属性值

名称

类型

必备

默认值

兼容性

描述

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