Bootstrap modal: закрыть текущий, открыть новый

Я знаю, что это поздний ответ, но может быть полезным. Вот правильный и чистый способ сделать это, как упоминалось выше @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>

демо

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

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

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

Я использую этот метод:

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

С 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 (сначала нажмите "запустить демо-модальный").

У меня точно такая же проблема, и мое решение только в том случае, если модальный диалог имеет атрибут [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;}
    }
  });
});

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

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

в сочетании с

data-dismiss="modal"

прокрутка не работает правильно и возвращается к прокрутке страницы, а не модальной. Это связано с удалением класса modal-open из тега data-dismiss.

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

С помощью функции щелчка:

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

Heads up:

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

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

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});

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

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

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

$("#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})});

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

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });

Если вы хотите закрыть ранее открытый модальный при открытии нового модального, то вы должны сделать это из 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.

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

Я создал плагин 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')". Скрыть часть все еще может быть таким же, как и раньше, и сложены подход показа и скрытия модалов автоматически заботятся.

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

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
}); 

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

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

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

была такая же проблема, написав это здесь, Если кто-то в будущем наткнется на это и имеет проблемы с несколько модальности, которые должны иметь скролл также (я использую 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: просто Примечание стороны, вы должны иметь эти модалы отдельно, второстепенный модальный не может быть вложен в первый, как вы скрываете первый

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

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

попробуй такое

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);