• swan.showModal
  • 方法参数
    • object 参数说明
    • success 返回参数说明
  • 示例
    • 代码示例 1：默认样式
    • 代码示例 2：无标题、单操作
    • 代码示例 3：自定义选项颜色
  • 错误码
    • Android
    • iOS

swan.showModal

解释：显示模态弹窗。用于同步用户重要信息，并要求用户进行确认，或执行特定操作以决策下一步骤。设计文档详见模态对话框。弹窗标题需措辞精简，建议控制在 8 个中文字符内。如果提示的内容简单，可以去掉弹窗标题。

方法参数

Object object

object 参数说明

success 返回参数说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

• SWAN
• JS

 


  
<view class="card-area">

  
 <view class="top-description border-bottom">默认样式</view>

  
 <button bindtap="primary" type="primary" hover-stop-propagation="true">默认模态弹窗</button>

  
</view>

 

代码示例 2：无标题、单操作

• SWAN
• JS

 


  
<view class="card-area">

  
 <view class="top-description border-bottom">设置无标题，单操作按钮</view>

  
 <button bindtap="showModalNotitle" type="primary" hover-stop-propagation="true">无标题模态弹窗</button>

  
</view>

 

代码示例 3：自定义选项颜色

• SWAN
• JS

 


  
<view class="card-area">

  
 <view class="top-description border-bottom">

  
 <view>自定义选项颜色</view>

  
 <view>

  
 confirmColor="#F7544F"

  
 cancelColor="#000000"

  
 </view>

  
 </view>

  
 <button bindtap="showModalColor" type="primary" hover-stop-propagation="true">自定义选项颜色的模态弹窗</button>

  
</view>

 

设计指南

可定制样式的只有选项按钮的文案颜色。

• 定义颜色时须有主次之分，可配合使用品牌色或主题色。但请注意，过多颜色并存，可能会影响用户判断。
• 对于不可逆的操作，建议使用红色（#ff1111），警告用户此操作的重要性。

 


  
![](/projects/smartprogram-20210306/d3263b4146a0acd071cdd118d8b1ca29.png) 

  


  
正确

  


  
确定按钮（confirmColor）使用品牌色，与小程序整体风格更一致。 

  


  


  


  
![](/projects/smartprogram-20210306/7f0f50b4c4df26c9baabecc386985b92.png) 

  


  
错误

  


  
多种强调色共用，导致按钮没有主次。

 

错误码

Android

iOS