Scenario
I have a Vue component that includes a child component responsible for displaying a modal.
Toggling the isShowModal boolean either through a button click or Vue devtools successfully displays and hides the modal as expected.
However, upon trying to reopen the modal by clicking the open button again, it fails to work. I've observed that the modal-backdrop still exists as an invisible overlay even though the modal-component is unmounted. This behavior confuses me as the component should be removed entirely.
Using the command $("#"+ idHere).modal("hide"); in the DevTools console hides the modal and the backdrop successfully.
Please note: I have specific reasons for mounting/unmounting the component to show/close the modal, hence directly calling
$("#" + "idHere").modal("show/hide");The code snippet below is a simplified representation of my actual code focusing on the parent/modal toggle functionality only. The template for the modal component closely resembles what's used in my code.
Inquiries
- How can I eliminate/disable the backdrop when unmounting my modal component?
- Is my approach of mounting/unmounting components appropriate in this scenario?
- Is toggling modals like I'm doing in Vue considered best practice?
Sample Code
Parent Component Example:
<template>
<div>
<modal-component
title = "Zone"
v-if = "isShowModal"
:closeCallback = "() => { isShowModal = false }" />
// Button to toggle the isShowModal bool
</div>
</template>
<script>
export default {
mounted() {
},
data() {
return {
isShowModal: false,
}
},
showZoneNewModal: function(zone) {
this.isShowModal = true;
},
}
</script>
Modal Component Example:
<template>
<div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" v-on:click="closeCallback()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">{{ title }}</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
// Header content
</div>
</div>
<div class="modal-footer">
// Body content
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
closeCallback: { type: Function, required: true },
}
mounted() {
$("#" + this._uid).modal('show');
},
beforeDestroy() {
$("#" + this._uid).modal("hide");
},
}
</script>
UPDATE
The issue seems to stem from this line spawning the backdrop div. Removing other code from the modal-component template did not resolve the problem.
<template>
<div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static">
</div>
</template>
UPDATE 2
Upon further investigation, I discovered that two divs are being spawned when the modal-component mounts. One of them appears in the Chrome DevTools as follows:
<div id="9" data-backdrop="static" class="modal fade in box-info show" style="display: block; padding-right: 17px;" aria-modal="true"></div>
The second div remains active and alive, although I couldn't find one labeled with the modal-backdrop. (I also ran a search but didn't locate anything.)
<div class="modal-backdrop fade show"></div>