Bootstrap modal: close current, open new

Question

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

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

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

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

Answer 1

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

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

Затем показать другую модальность, когда он спрятан:

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

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

Answer 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 (нажмите на кнопку "Запуск демо-Modal" первый).

Answer 3

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

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

Answer 4

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

В HTML в одной и той же кнопки, вы можете попросить, чтобы закрыть текущий модальность с данными сбрасывать со счетов и открыть новую модальность непосредственно с данными-мишени:

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

Answer 5

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

HTML Markup;

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

Demo

Answer 6

Проблема с 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; 
}); 

Answer 7

У меня точно такая же проблема, и мое решение только тогда, когда модальное диалоговое окно есть [роль = «Диалог»] атрибут:

/* 
* 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;} 
    } 
    }); 
}); 

Answer 8

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

Answer 9

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

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

в сочетании с

data-dismiss="modal" 

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

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

Answer 10

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

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

Answer 11

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

Answer 12

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

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

Heads Up:

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

Answer 13

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

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

Answer 14

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

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

Answer 15

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

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

<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 class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id"> 

Answer 16

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

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

Answer 17

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

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

detaile блог: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/