Модальный режим начальной загрузки: закрыть текущий, открыть новый

86

Я искал какое-то время, но не могу найти решение для этого. Я хочу следующее:

  • Откройте URL-адрес внутри модального окна Bootstrap. У меня конечно есть эта отработка. Таким образом, контент загружается динамически.
  • Когда пользователь нажимает кнопку внутри этого модального окна, я хочу, чтобы текущее модальное окно было скрыто, и сразу после этого я хочу, чтобы новый модальный экран открывался с новым URL-адресом (который пользователь щелкнул). Это содержимое 2-го модального окна также загружается динамически.
  • Если пользователь затем закрывает это второе модальное окно, первое модальное окно должно вернуться снова.

Я смотрел на это несколько дней, надеюсь, что кто-то может мне помочь.

Заранее спасибо.

javascript jquery twitter-bootstrap Элко Луурцема
источник
Bootstrap 2 или 3? Можете ли вы настроить JS Fiddle из того, что у вас есть?
Тим Уоссон,
Bootstrap 2.3.1. Я думаю, что не могу настроить JS Fiddle из-за динамического контента
Элко Луурцема
подробный блог: sforsuresh.in/…
Суреш Камруши

Ответы:

61

Не видя конкретного кода, сложно дать точный ответ. Однако из документации Bootstrap вы можете скрыть модальное окно следующим образом:

$('#myModal').modal('hide')

Затем покажите другое модальное окно, когда оно будет скрыто:

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

Вам нужно будет найти способ перенести URL-адрес в новое модальное окно, но я предполагаю, что это будет тривиально. Не видя кода, трудно привести пример этого.

Тим Уоссон
источник
Как ни странно, у меня он работал с Bootstrap 3. Я думаю, что у моего кода конфликт с всплывающими подсказками Bootstrap, и это изменено в версии 3. Спасибо
Eelco Luurtsema
8
Событие bootstrap v3 - «hidden.bs.modal»
coure2011
3
Решение с увольнением данных намного элегантнее (по крайней мере, в 2015 году) и не требует никакого JavaScript, отличного от начальной загрузки.
Мануэль Арвед Шмидт
Спасибо @ coure2011
Capcom
4
data-toggle = "modal" data-target = "# targetmodal" data-dismiss = "modal" Это прекрасно работает.
Sushan
80

Я знаю, что это запоздалый ответ, но он может быть полезен. Вот правильный и чистый способ сделать это, как упоминалось выше в @ karima. Фактически вы можете запускать две функции одновременно; triggerи dismissмодальный.

HTML-разметка;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

Демо

Махмуд
источник
25
Нет bueno, потому что вы заметите, что после открытия первого модального окна прокрутка страницы работает правильно, но если вы запустите другое модальное окно из существующего модального окна, прокрутка переместится в фоновый режим. Это большая проблема, если у вас есть модальное окно, которое нужно прокручивать (например, если вы просматриваете на мобильном устройстве).
Gravity Grave,
У меня очень похожая проблема, но в angular. Вы знаете , как сделать то же самое, что и здесь , но в угловом контроллере и с помощью templateUrlи windowClassсвойства?
John R
1
Спасибо - у меня работает. Основная проблема для меня заключалась в том, что я пропустил data-dismiss="modal"кнопку
FDisk
@Mahmoud, а есть ли способ избежать эффекта вибрации при загрузке второго модального окна из одного? а как избежать лишней прокрутки?
Арун Ксавьер
Это проблема браузера, в Google Chrome "трясутся" при изменении модального окна, закрытии или открытии. попробуйте -webkit-backface-visibility: hidden;на HTML, CSS тело
Максим Alekz
38

Это не совсем ответ, но он полезен, когда вы хотите закрыть текущее модальное окно и открыть новое.

В html той же кнопке вы можете попросить закрыть текущее модальное окно с помощью data-dismiss и открыть новое модальное окно напрямую с помощью data-target:

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>
Карима Рафес
источник
2
Проблема в data-dismiss="modal"том, что он сместит ваш контент влево, когда вы закроете второе модальное окно.
Kuldeep Dangi
1
хмммм. у меня этот метод не работает. Первый уходит, а второй не появляется
KevinDeus
Я не уверен, в чем проблема, Кевин, но у меня все сработало с Bootstrap 3. Первый модальный
файл
У меня получилось красиво! И очень простое решение. Благодаря!
guero64
Просто и найти лучшее решение для отображения и скрытия модального окна.
Робин
10

Проблема в data-dismiss="modal"том, что он сместит ваш контент влево

Я делюсь тем, что у меня сработало, статус проблемы открывался pop1сpop2

КОД JS

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});
Кулдип Данги
источник
2
такое простое решение :)
Джефф
9

Я использую такой способ:

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});
Джош Дин
источник
4

Используя следующий код, вы можете скрыть первый модальный и сразу открыть второй модальный, используя ту же стратегию, вы можете скрыть второй модальный и показать первый. 

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});
Хуснайн Шабир
источник
Также исправлена ​​проблема со прокруткой
Ричард Хаушэм
4

Вам необходимо добавить следующий атрибут к ссылке или кнопке, к которой вы хотите добавить эту функцию: 

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

Подробный блог: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

Суреш Камруши
источник
Отлично работает с bootstrap 4.
Heather92065
4 
data-dismiss="modal"

он используется для закрытия существующей открытой модели. вы можете установить его на новую модель

М. Лак
источник
Я не хочу, чтобы это работало на всех версиях начальной загрузки. Модальное окно отклонения в моем случае приводит к закрытию модального окна и открытию нового, но оно также удаляет модальный класс из тела, и тогда я не могу прокрутить модальный экран вниз.
Бодох
4

Как упоминалось выше, в html на той же кнопке вы можете попросить закрыть текущее модальное окно с помощью data-dismiss и открыть новое модальное окно напрямую с помощью data-target:

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

Но это приведет к исчезновению полосы прокрутки, и вы заметите, что если второе модальное окно было длиннее первого

Итак, решение состоит в том, чтобы добавить следующий стиль в модальный встроенный стиль:

Style = "overflow-y : scroll ; "

ануар эс-сайид
источник
2

С BootStrap 3 вы можете попробовать следующее: -

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

Протестировано для работы с: http://getbootstrap.com/javascript/#modals (сначала нажмите «Launch Demo Modal»).

Элвин К.
источник
3
Я не думаю, что тебе нужен .attrбит, а? Разве это не сработало бы? var visible_modal = jQuery('.modal.in'); if (visible_modal) { visible_modal.modal('hide'); }.
Пол Д. Уэйт
2

У меня точно такая же проблема, и мое решение только в том случае, если модальный диалог имеет атрибут [role = "dialog"]:

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});
Джонни
источник
1
jsfiddle.net/e6x4hq9h/7 Я попробовал это, и он работает в первый раз, когда я открываю модальный, но не в последующие раз.
Джошуа Дикерсон
2

У меня была та же проблема, что и у @Gravity Grave, когда прокрутка не работает, если вы используете

data-toggle="modal" data-target="TARGET-2"

в сочетании с 

data-dismiss="modal"

Прокрутка работает некорректно и возвращается к прокрутке страницы, а не к модальному. Это происходит из-за удаления из тега модального открытого класса.

В конце концов, мое решение заключалось в том, чтобы установить html внутреннего компонента в модальном окне и использовать css для постепенного появления / исчезновения текста.

Джамадан
источник
1

Используя функцию щелчка:

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

Берегись:

Убедитесь, что тот, который вы хотите показать, является независимым модальным.

Клаудиос
источник
1

В первом модальном режиме:

замените модальную ссылку на закрытие в нижнем колонтитуле на ссылку закрытия ниже.

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

Во втором модальном режиме:

Затем второй модальный заменит верхний div тегом ниже div.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">
Таймор Чангайз
источник
1

Была такая же проблема, написав это здесь, на случай, если кто-то в будущем наткнется на это и возникнут проблемы с несколькими модальными окнами, которые должны иметь прокрутку (я использую Bootstrap 3.3.7)

У меня была такая кнопка внутри моего первого модального окна:

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

Он скроет первый, а затем отобразит второй, а во втором модальном окне у меня будет кнопка закрытия, которая будет выглядеть так:

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

Таким образом, это закроет второе модальное окно и откроет первое, а для работы с прокруткой я добавил в свой файл .css эту строку:

.modal {
overflow: auto !important;
}

PS: Просто примечание, вы должны иметь эти модальные окна отдельно, второстепенный модальный не может быть вложен в первый, поскольку вы скрываете первый

Итак, вот полный пример, основанный на модальном примере начальной загрузки:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>
Renet
источник
1

Попробуй это

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);
keroles Monsef
источник
1
На самом деле это лучше, чем принятое решение, поскольку ни один слушатель не будет навсегда привязан к модальному событию закрытия.
Луис Энрикес
0 
$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});
Аджай Кабария
источник
$ ("# buttonid"). click (function () {$ ('# modal_id_you_want_to_hid'). modal ('hide')}); // то же, что и выше id кнопки $ ("# buttonid"). click (function () {$ ('# Modal_id_You_Want_to_Show'). modal ({backdrop: 'static', keyboard: false})})
Аджай Кабария,
0

Я использую другой способ:

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });
Алексей Морозов
источник
0

Если вы хотите закрыть ранее открытое модальное окно при открытии нового модального окна, вы должны сделать это из javascript / jquery, сначала закрыв текущее открытое модальное окно, а затем предоставив тайм-аут 400 мс, чтобы он мог закрыться, а затем откройте новый модальный, как показано ниже. : 

$('#currentModal').modal('hide');

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

Если вы попытаетесь сделать это с помощью, data-dismiss="modal"то у него будет проблема с прокруткой, о которой говорили @gravity и @kuldeep в комментариях.

Shivgre
источник
0

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

Для этого я создал плагин jQuery.

/*
 * Raj: This file is responsible to display the modals in a stacked fashion. Example:
 * 1. User displays modal A
 * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
 * 3. User dismisses modal B
 * 4. Modal A should now be displayed automatically -> This does not happen all by itself 
 * 
 * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
 * 
 */

var StackedModalNamespace = StackedModalNamespace || (function() {
    var _modalObjectsStack = [];
    return {
        modalStack: function() {
            return _modalObjectsStack;
        },
        currentTop: function() {
            var topModal = null;
            if (StackedModalNamespace.modalStack().length) {
                topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
            }
            return topModal;
        }
    };
}());

// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
    // https://api.jquery.com/jquery.fn.extend/
    showStackedModal: function() {
        var topModal = StackedModalNamespace.currentTop();
        StackedModalNamespace.modalStack().push(this);
        this.off('hidden.bs.modal').on('hidden.bs.modal', function(){   // Subscription to the hide event
            var currentTop = StackedModalNamespace.currentTop();
            if ($(this).is(currentTop)) {
                // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
                StackedModalNamespace.modalStack().pop();
            }
            var newTop = StackedModalNamespace.currentTop();
            if (newTop) {
                // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
                newTop.modal('show');
            }
        });
        if (topModal) {
            // 2. If some modal is displayed, lets hide it
            topModal.modal('hide');
        } else {
            // 1. If no modal is displayed, just display the modal
            this.modal('show');
        }
    },
});

Рабочий скрипт для справки, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/

Вам просто нужно вызывать с моим новым API " showStackedModal()" вместо " modal('show')". Часть скрытия по-прежнему может быть такой же, как и раньше, и автоматически учитывается групповой подход к отображению и скрытию модальных окон.

Радж Паван Гумдал
источник
0

Простое и элегантное решение для BootStrap 3.x. Таким образом можно повторно использовать одно и то же модальное окно.

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
});
Авниш алок
источник
0

если вы используете mdb, используйте этот код 

    var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
    if (visible_modal) { // modal is active
        $('#' + visible_modal).modal('hide'); // close modal
    }
Моейн Масуди
источник
0 
<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;

&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt; ... &lt;/div&gt;
     &lt;div class="modal-footer"&gt;           &lt;!-- ↓ --&gt;  &lt;!--      ↓      --&gt;
      &lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />
Джунаид Масуд
источник
0

Возможно, я немного опоздаю, но думаю, что нашел рабочее решение.

Необходимые -

jQuery

Все модальные окна с кнопкой закрытия / закрытия имеют следующие атрибуты:

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>

Пожалуйста, посмотрите класс close_modal, добавленный в классы кнопки

Теперь, чтобы закрыть все существующие модальные окна, мы вызовем 

$(".close_modal").trigger("click");

Итак, где бы вы ни захотели открыть модальный

Просто добавьте приведенный выше код, и все ваши открытые модальные окна будут закрыты.

Затем добавьте свой обычный код, чтобы открыть желаемый модальный

$("#DesiredModal").modal();
Альфа
источник
0

Скрыть модальное диалоговое окно.

Метод 1: с помощью Bootstrap.

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

Способ 2: использование stopPropagation().

$("a.close").on("click", function(e) {
  $("#modal").modal("hide");
  e.stopPropagation();
});

Метод 3: после вызова указанного метода.

$('#myModal').on('shown', function () {
  $('#myModal').modal('hide');
})

Метод 4: Использование CSS.

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog
Бхаратхираджа
источник
0

Этот код закрывает модальное окно открытым, открывает новое модальное окно, но сразу же закрывается новое модальное окно.

$(nameClose).modal('hide');
$(nameOpen).modal('show');

Мое решение для открытия нового модального окна после закрытия другого:

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}
Адриан Гарсия Сабате
источник
0

Просто скопируйте и вставьте этот код, и вы можете экспериментировать с двумя модальными окнами. Второе модальное окно открывается после закрытия первого:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>



<!-- The Modal 2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Second modal</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

Ура!

Адам Козловски
источник