Bootstrap-vue открыть модальное окно из модального

Есть ли способ открыть новый модальный файл из другого модального окна в 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>

Когда я запускаю этот пример на https://bootstrap-vue.js.org/play, он откроет первый модальный, но когда я нажму кнопку, чтобы открыть второй модальный, он закроет первый.


vue.js bootstrap-vue
person Superdumbell    schedule 11.10.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вам просто нужно переупорядочить компоненты так, чтобы кнопка находилась внутри первого модального окна, а второе модальное окно должно быть снаружи, чтобы оно не закрывалось первым модальным.

<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>

проверьте этот рабочий пример

person Husam Ibrahim    schedule 11.10.2018
comment
@boussadjrabrahim Да, мы, должно быть, пытались решить эту проблему одновременно. Сначала я думал об использовании PortalVue, но, похоже, решение намного проще. Спасибо за +1 :) - person Husam Ibrahim; 12.10.2018
comment
Он работает, но по-прежнему закрывает родительский модальный файл. Думаю, мне нужно что-то более похожее на то, как работают вложенные модальные окна в reactstrap. - person Superdumbell; 12.10.2018
comment
Обновитесь до последней версии BootstrapVue, в которой добавлена ​​поддержка нескольких модальных окон. Официальный Bootstrap v4.x не поддерживает несколько открытых модальных окон, но BootstrapVue добавил для него настраиваемую поддержку. Также не помещайте b-modal внутри другого b-modal. Это вызовет проблемы. - person Troy Morehouse; 11.07.2019
comment
Я делаю именно это, за исключением того, что у modal1 есть директива для запуска modal2, а у modal2 есть директива для запуска model1. Оба b-модальных окна имеют опцию без стекирования, поэтому эффект, которого я пытаюсь достичь, - это переключение между ними. Что происходит: modal1 может перейти в modal2, а modal2 - в modal1, но однажды на втором шаге в любом случае директива больше не делает ничего для изменения модальных окон более одного раза. Таким образом, вы можете переключиться только один раз. Есть мысли по этому поводу? - person mmccaff; 12.02.2021
comment
Обновите мой комментарий выше: проблема связана с директивами. Он работает должным образом, если вместо использования директив определено событие щелчка для открытия другого модального окна, например @ click = $ root. $ Emit ('bv :: show :: modal', id + '_subscribe', $ event .цель) - person mmccaff; 12.02.2021