uniapp图片弹框效果

需求：点击提交按钮，提交成功后会弹出一个弹框，提示成功，点击右上角的叉号或者我知道了，隐藏弹框效果。

<template>
    <view>  
    
        <form>
            <view class="uni-btn-v uni-common-mt">
                <button class="btn-submit" formType="submit" type="primary"@tap="showModal" data-target="Image">提交打卡</button>
            </view>
        </form>

        <view class="cu-modal" :class="modalName=='Image'?'show':''">
            <view class="cu-dialog">
                <view class="bg-img" style="background-image: url('../../static/img/alarm.png');height:250px;">
                    <view class="cu-bar justify-end text-white">
                        <view class="action" @tap="hideModal">
                            <text class="cuIcon-close "></text>
                        </view>
                    </view>
                </view>
                <view class="cu-bar bg-white">
                    <view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
    export default {
        data() {
            return {
                modalName: null,
            };
        },
        methods: {
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal(e) {
                this.modalName = null
            },
        }
    }
</script>

<style>
    .cu-form-group .title {
        min-width: calc(4em + 15px);
    }
    .btn-submit {
        background-color: #1C2A86;
        margin: 100upx 20upx;
        color: #fff;
    }
</style>