
<template>
    <div @click="closeModal" class="modal fade scrollbar-none" :class="{ 'show': display, 'display-block': display , 'modal-back' : display  }"  id="modalCenter" tabindex="-1" aria-modal="true" role="dialog">
        <div @click.stop class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title m-auto fw-bold" id="modalCenterTitle">
                        <slot name="title">Modal Title</slot>
                    </h5>
                    <button type="button" class="btn-close" @click="closeModal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <slot name="body">Modal body</slot>
                </div>
                <div class="modal-footer">
                    <slot name="footer">Modal foot</slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const prop = defineProps({
    display : {
        type: Boolean,
        default: false,
        required: true,
    },
});

const emit = defineEmits(['close']);

const closeModal = () => {
    emit('close' , false);
};
</script>

<style>
.modal-back {
    background: rgba(0, 0, 0, 0.5);
}
</style>




