48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
|
|
<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>
|
|
|
|
|
|
|
|
|