百度智能小程序 顯示模態(tài)彈窗

swan.showModal

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

方法參數(shù)

Object object

object 參數(shù)說明

success 返回參數(shù)說明

示例 

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

代碼示例 1：默認樣式

<view class="card-area">
    <view class="top-description border-bottom">默認樣式</view>
    <button bindtap="primary" type="primary" hover-stop-propagation="true">默認模態(tài)彈窗</button>
</view>

Page({
    primary() {
        swan.showModal({
            title: '提示標題',
            content: '提示內(nèi)容、告知狀態(tài)、信息和解決方法，描述盡量控制在兩行內(nèi)',
            showCancel: true,
            cancelText: '取消',
            confirmText: '確定'
        });
    }
});

代碼示例 2：無標題、單操作

<view class="card-area">
    <view class="top-description border-bottom">設置無標題，單操作按鈕</view>
    <button bindtap="showModalNotitle" type="primary" hover-stop-propagation="true">無標題模態(tài)彈窗</button>
</view>

Page({
    showModalNotitle() {
        swan.showModal({
            content: '提示內(nèi)容、告知狀態(tài)、信息和解決方法，可以折行',
            showCancel: false,
            confirmText: '確定'
        });
    }
});

代碼示例 3：自定義選項顏色

<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">自定義選項顏色的模態(tài)彈窗</button>
</view>

Page({
    showModalColor() {
        swan.showModal({
            title: '提示標題',
            content: '提示內(nèi)容、告知狀態(tài)、信息和解決方法，描述盡量控制在兩行內(nèi)',
            showCancel: true,
            confirmText: '警示操作',
            cancelText: '取消',
            cancelColor: '#000000',
            confirmColor: '#F7544F'
        });
    }
});

設計指南

可定制樣式的只有選項按鈕的文案顏色。

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

  

  正確

  確定按鈕（confirmColor）使用品牌色，與小程序整體風格更一致。

  

  錯誤

  多種強調(diào)色共用，導致按鈕沒有主次。

參考示例

參考示例 1：開發(fā)者可在操作 modal 后進行業(yè)務邏輯 

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

<view class="wrap">
    <view class="card-area">
        <button bindtap="showModal" type="primary" hover-stop-propagation="true">button</button>
    </view>
</view>

Page({
    showModal() {
        swan.showModal({
            title: 'title',
            content: 'content',
            success:res => {
                if (res.confirm) {
                    console.log('用戶點擊了確定');
                }
                else if(res.cancel) {
                    console.log('用戶點擊了取消');
                }
            }
        });
    }
});

錯誤碼

Android

iOS