Bootstrap-vue open modal from modal

1
votes

Is there a way to open a new modal from another modal in bootstrap-vue?

<div>
  <b-btn v-b-modal.modal1>Launch demo modal</b-btn>
  <b-modal id="modal1" title="Bootstrap-Vue">
    <b-btn v-b-modal.modal2>Launch another modal</b-btn>
    <b-modal id="modal2" title="Bootstrap-Vue">
      Vueception
    </b-modal>
  </b-modal>
</div>

When I run this example on https://bootstrap-vue.js.org/play it will open the first modal but when I click the button to open the 2nd modal it will cause the first one to close.

1
vue.jsbootstrap-vue

1 Answers

3
votes

You just need to reorder your components so that the button is inside the first modal but the second modal should be outside so that it doesn't get closed with the first modal ..

<div>
  <b-btn v-b-modal.modal1>Launch demo modal</b-btn>
  <b-modal id="modal1" title="Bootstrap-Vue">
    <b-btn v-b-modal.modal2>Launch another modal</b-btn>
  </b-modal>
  <b-modal id="modal2" title="Bootstrap-Vue">
    Vueception
  </b-modal>
</div>

check this working example