uniapp自定义弹框的方法

<template>
    <view @click="close()" class="mask">
        <view class="content">
            <view class="" @click.stop="doScanCode">点击扫码</view>
            <view class="" @click.stop="doDialog">点击弹出</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            close() {
                uni.navigateBack()
            },
            doDialog() {
                uni.showModal({
                    title:'uniapp弹框'
                })
            },
            doScanCode() {
                uni.scanCode({
                    success: function(res) {
                        console.log('条码类型：' + res.scanType);
                        console.log('条码内容：' + res.result);
                        uni.navigateTo({
                            url:'../scancode/scancode'
                        })
                    }
                });
            }
        }
    }
</script>

<style>
    page {
        background: transparent;
    }
    
    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        
        display: flex;
        
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
    }
    
    .content {
        width: 200px;
        height: 200px;
        background-color: #007AFF;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

{// 点击tabbar中间的按钮进入此页面，设置为透明的，当做一个弹框，
"path": "pages/midDialog/midDialog",
    "style": {
        "background": "transparent",
        "app-plus": {
            "titleNView": false
        }
    }

}

// 这些是要写在App.Vue中onLaunch里边
uni.onTabBarMidButtonTap(() => {
    uni.navigateTo({
        url: '/pages/midDialog/midDialog',
        animationType: 'fade-in',
        animationDuration: 200,
        fail(err) {
            console.log(err)
        }
    });
})