webUrl: https://qft12m.smartapps.cn/swan-api/modal/modal

title: swan.showModal header: develop nav: api sidebar: toast_swan-showModal

webUrl: https://qft12m.smartapps.cn/swan-api/modal/modal

解释：显示模态弹窗

方法参数

Object object

object参数说明

success返回参数说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1 - 默认样式:

:::codeTab

<view class="card-area">
    <view class="top-description border-bottom">默认样式</view>
    <button bindtap="primary" type="primary" hover-stop-propagation="true">默认模态弹窗</button>
</view>

Page({
    primary() {
        swan.showModal({
            title: '提示标题',
            content: '提示内容、告知状态、信息和解决方法，描述尽量控制在两行内',
            showCancel: true,
            cancelText: '取消',
            confirmText: '确定'
        });
    }
});

:::

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

:::codeTab

<view class="card-area">
    <view class="top-description border-bottom">设置无标题，单操作按钮</view>
    <button bindtap="showModalNotitle" type="primary" hover-stop-propagation="true">无标题模态弹窗</button>
</view>

Page({
    showModalNotitle() {
        swan.showModal({
            content: '提示内容、告知状态、信息和解决方法，可以折行',
            showCancel: false,
            confirmText: '确定'
        });
    }
});

:::

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

:::codeTab

<view class="card-area">
    <view class="top-description border-bottom">
        <view>自定义选项颜色</view>
        <view>
            confirmColor=“#000000”
            cancelColor=“#999999”
        </view>
    </view>
    <button bindtap="showModalColor" type="primary" hover-stop-propagation="true">自定义选项颜色的模态弹窗</button>
</view>

Page({
    showModalColor() {
        swan.showModal({
            title: '提示标题',
            content: '提示内容、告知状态、信息和解决方法，描述尽量控制在两行内',
            showCancel: true,
            confirmText: '操作',
            cancelText: '警示操作',
            cancelColor: '#FF0000'
        });
    }
});

:::

参考示例

参考示例1 - 开发者可在操作modal后进行业务逻辑

在开发者工具中预览效果

:::codeTab

Page({
    showModal() {
        swan.showModal({
            title: 'title',
            content: 'content',
            success(res) {
                console.log(res)
                if (res.confirm) {
                    console.log('用户点击了确定');
                }
                else if(res.cancel) {
                    console.log('用户点击了取消');
                }
            }
        });
    }
});

:::

参考示例2 - 开发者可自定义一个showModal

在开发者工具中预览效果

:::codeTab

<view class="wrap">
    <button type="primary" bindtap="showModal" data-statu="open">点我打开自定义弹窗</button>  
    <!--mask-->  
    <view class="mask" bindtap="showModal" data-statu="close" s-if="{{showModalStatus}}"></view>  
    <!--content-->  
    <view animation="{{animationData}}" class="showModal-box" s-if="{{showModalStatus}}">  
    <view class="showModal-title">标题</view>  
    <view class="showModal-content">  
       <view class="border-bottom">可自定义展示接口请求返回的数据</view>
       <view s-for="item, index in data" class="border-bottom">
           <view>{{index}}</view>
           <view>价钱：{{item.money}}</view>
           <view>途径：{{item.source}}</view>
           <view>类型：{{item.type}}</view>
           <view>满减活动：{{item.upTo}}</view>
        </view>
    </view>  
    <view class="confirm" bindtap="showModal" data-statu="close">确定</view>  
    </view>
</view>

Page({
    data: {
        showModalStatus: false,
        data: {}
    },
    showModal(e) {
        var currentStatu = e.currentTarget.dataset.statu;
        this.animation(currentStatu);
        this.request();
    },
    animation(currentStatu){
        var animation = swan.createAnimation({
            duration: 1000,  
            timingFunction: "ease",
            delay: 0  
        });
        animation.opacity(0).rotateX(-100).step();
        this.setData({
            animationData: animation.export()
        })
        setTimeout(function () {
            animation.opacity(1).rotateX(0).step();
            this.setData({
                animationData: animation
            }) 
            if (currentStatu == "close") {
                this.setData({showModalStatus: false});
            }
        }.bind(this), 200)
        if (currentStatu == "open") {
            this.setData({showModalStatus: true});
        }
    },
    request() {
        swan.request({
            url: 'https://sfc.baidu.com/shopping/nianhuo/bimai',
            header: {
                'content-type': 'application/json'
            },
            method: 'POST',
            dataType: 'json',
            responseType: 'text',
            data: {
                key: 'value'
            },
            success: res => {
                this.setData({
                    data: res.data.data.couponList
                })
            },
            fail: err => {
                console.log('错误码：' + err.errCode);
                console.log('错误信息：' + err.errMsg);
            }
        });
    }
})

:::

错误码

Android

iOS