I have several buttons within my code that calls showModal(title).
showModal(title) {
this.modalTitle = title
this.$bvModal.show("add-modal")
}
The targeted modal is shown below.
<b-modal
id="add-modal"
ref="modal"
v-bind:title="'Add Item to ' + modalTitle + ' list'"
...
I want it so only one <b-modal> tag is required within the Vue component, but can be opened by several different buttons. On the first page load, each modal (with the different titles) opens as intended. However, when I change the code and the browser reloads, I go to open another modal and old modals are opened on top of the intended one.
Is there a way I can ensure that modals are not opened on top of one another and that only one modal is opened after the browser reloads?
Thanks
I strongly suggest you use JavaScript if you're dealing with multiple modal in your page.
Example: (Jquery) I'm using Bootstrap 4
<script type="text/javascript">
$(document).ready(function () {
//when triggering using buttons
$("#button1").click(function(){
$('#modal2').modal('hide');
});
$("#button2").click(function(){
$('#modal1').modal('hide');
});
//on page load, and you want your modal1 to be launch
$("#modal1").modal('show');
});
</script>