1

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

christian21
  • 71
  • 6

1 Answers1

0

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>
xrak
  • 111
  • 6
  • Thanks for the response. I realised my question was a little ambiguous and didn't correctly capture what I wanted. I have edited it to hopefully be clearer. – christian21 Jul 15 '22 at 03:27