After attempting to integrate a modal into a component, I encountered an issue where the backdrop appears in front and the modal is hidden behind it as shown below. I have reviewed all the position CSS properties within the parent components but could not find any instances of
position: fixed, relative, or absolutehttps://i.sstatic.net/eUpTZ.png
The code snippet causing the problem is displayed below:
<template>
<div
class="modal p-4"
id="confirmModal"
tabindex="-1"
data-bs-backdrop="static"
data-bs-keyboard="false"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered p-4 modal-xl">
<div class="modal-content p-4">
<div class="modal-body text-center">
<p class="my-5">No Images</p>
</div>
</div>
</div>
</div>
</template>
<script>
import bootstrap from "bootstrap/dist/js/bootstrap.min.js";
export default {
name: "ConfirmationDialog",
mounted() {
this.openViewer();
},
methods: {
openViewer() {
var myModal = new bootstrap.Modal(document.getElementById("confirmModal"), {
keyboard: false,
});
myModal.show();
},
},
};
</script>
If anyone has suggestions on how to resolve this issue, please provide assistance. Thank you!