• swan.showModal
  • 方法參數(shù)
    • object 參數(shù)說明
    • success 返回參數(shù)說明
  • 示例
    • 代碼示例 1：默認(rèn)樣式
    • 代碼示例 2：無標(biāo)題、單操作
    • 代碼示例 3：自定義選項(xiàng)顏色
  • 錯(cuò)誤碼
    • Android
    • iOS

swan.showModal

解釋：顯示模態(tài)彈窗。用于同步用戶重要信息，并要求用戶進(jìn)行確認(rèn)，或執(zhí)行特定操作以決策下一步驟。設(shè)計(jì)文檔詳見模態(tài)對(duì)話框。彈窗標(biāo)題需措辭精簡(jiǎn)，建議控制在 8 個(gè)中文字符內(nèi)。如果提示的內(nèi)容簡(jiǎn)單，可以去掉彈窗標(biāo)題。

方法參數(shù)

Object object

object 參數(shù)說明

title

String

否

“”

提示的標(biāo)題

content

String

否

“”

提示的內(nèi)容

showCancel

Boolean

否

true

是否顯示取消按鈕

cancelText

String

否

取消

取消按鈕的文字，最多 4 個(gè)字符

cancelColor

HexColor

否

#000000

取消按鈕的文字顏色

confirmText

String

否

確定

確定按鈕的文字，最多 4 個(gè)字符

confirmColor

HexColor

否

#3c76ff

確定按鈕的文字顏色

success

Function

否

接口調(diào)用成功的回調(diào)函數(shù)

fail

Function

否

接口調(diào)用失敗的回調(diào)函數(shù)

complete

Function

否

接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

屬性名	類型	必填	默認(rèn)值	說明

success 返回參數(shù)說明

confirm

Boolean

為 true 時(shí)，表示用戶點(diǎn)擊了確定按鈕

cancel

Boolean

為 true 時(shí)，表示用戶點(diǎn)擊了取消

參數(shù)名	類型	說明

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

代碼示例 1：默認(rèn)樣式

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 默認(rèn)樣式
  
  
  
 默認(rèn)模態(tài)彈窗
  
  
  
 
 

代碼示例 2：無標(biāo)題、單操作

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 設(shè)置無標(biāo)題，單操作按鈕
  
  
  
 無標(biāo)題模態(tài)彈窗
  
  
  
 
 

代碼示例 3：自定義選項(xiàng)顏色

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 自定義選項(xiàng)顏色
  
  
  
 
  
  
  
 confirmColor="#F7544F"
  
  
  
 cancelColor="#000000"
  
  
  
 
  
  
  
 
  
  
  
 自定義選項(xiàng)顏色的模態(tài)彈窗
  
  
  
 
 

設(shè)計(jì)指南

可定制樣式的只有選項(xiàng)按鈕的文案顏色。

• 定義顏色時(shí)須有主次之分，可配合使用品牌色或主題色。但請(qǐng)注意，過多顏色并存，可能會(huì)影響用戶判斷。
• 對(duì)于不可逆的操作，建議使用紅色（#ff1111），警告用戶此操作的重要性。

 
 
 
  
  
  
![](/projects/smartprogram-20210306/d3263b4146a0acd071cdd118d8b1ca29.png)
  
  
  
  
  
  
正確
  
  
  
  
  
  
確定按鈕（confirmColor）使用品牌色，與小程序整體風(fēng)格更一致。
  
  
  
  
  
  
  
  
  
  
  
  
![](/projects/smartprogram-20210306/7f0f50b4c4df26c9baabecc386985b92.png)
  
  
  
  
  
  
錯(cuò)誤
  
  
  
  
  
  
多種強(qiáng)調(diào)色共用，導(dǎo)致按鈕沒有主次。
 
 

錯(cuò)誤碼

Android

201

解析失敗，請(qǐng)檢查調(diào)起協(xié)議是否合法

錯(cuò)誤碼	說明

iOS

202

解析失敗，請(qǐng)檢查參數(shù)是否正確

錯(cuò)誤碼	說明

新聞名稱：創(chuàng)新互聯(lián)百度小程序教程：swan.showModal
鏈接URL：http://www.5511xx.com/article/dpppcjp.html