Bootstrap modal: fechar atual, abrir novo

Eu olhei por um tempo, mas não consigo encontrar uma solução para isso. Eu quero o seguinte:

  • Abra um URL dentro de um modal do Bootstrap. Eu tenho esse trabalho fora do curso. Então o conteúdo é carregado dinamicamente.
  • Quando um usuário pressiona um botão dentro desse modal, eu quero que o modal atual seja oculto, e imediatamente depois disso, eu quero um novo modal para abrir com o novo URL (no qual o usuário clicou). Este conteúdo do segundo modal também é carregado dinamicamente.
  • Se o usuário, em seguida, fecha esse segundo modal, o primeiro modal deve voltar novamente.

Eu tenho olhado isso por dias, espero que alguém possa me ajudar.

Desde já, obrigado.

Sem ver um código específico, é difícil dar uma resposta precisa. No entanto, a partir dos documentos do Bootstrap, você pode ocultar o modal desta forma:

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

Então, mostre outro modal assim que estiver oculto:

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

Você vai ter que encontrar uma maneira de empurrar a URL para a nova janela modal, mas eu diria que seria trivial. Sem ver o código, é difícil dar um exemplo disso.

Eu sei que esta é uma resposta tardia, mas pode ser útil. Aqui está uma maneira correta e limpa de fazer isso, como o @ karima mencionado acima. Você pode realmente triggersr duas funções de uma só vez; trigger e dismiss o modal.

Marcação HTML;

  ...  

Demonstração

Não é exatamente a resposta, mas é útil quando você deseja fechar o modal atual e abrir um novo modal.

No html no mesmo botão, você pode pedir para fechar o modal atual com data-dismiss e abrir um novo modal diretamente com o data-target:

  

Eu uso esse método:

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

Problema com data-dismiss="modal" é que ele mudará seu conteúdo para a esquerda

Eu estou compartilhando o que funcionou para mim, problema statment estava abrindo pop1 do pop2

CÓDIGO 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; }); 

Com o Bootstrap 3, você pode tentar isto:

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

Testado para trabalhar com: http://getbootstrap.com/javascript/#modals (clique em “Launch Demo Modal” primeiro).

Eu tenho exatamente o mesmo problema, e minha solução é somente se o modal dialog tiver o atributo [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;} } }); }); 

Eu tive o mesmo problema que @Gravity Grave pelo qual a rolagem não funciona se você usar

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

em conjunit com

 data-dismiss="modal" 

A rolagem não funciona corretamente e reverte para rolar a página em vez do modal. Isso ocorre porque dados dispensam a remoção da class modal-open da tag.

Minha solução no final foi para definir o html do componente interno no modal e usar css para diminuir o texto in / out.

Usando a function de clique:

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

Atenção:

Certifique-se de que aquele que você deseja mostrar é um modal independente.

Usando o seguinte código você pode esconder o segundo modal e abrir imediatamente o segundo modal, usando a mesma estratégia você pode esconder o segundo modal e mostrar o primeiro.

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

Você precisa adicionar o seguinte atributo ao link ou botão onde deseja adicionar essa funcionalidade:

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

Um blog detaile: 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})}); 

Eu uso de outra maneira:

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

Se você quiser fechar o modal aberto anteriormente enquanto abre o novo modal, então você deve fazê-lo de javascript / jquery primeiro fechando o modal aberto atual e, em seguida, dar um tempo limite de 400ms para permitir que ele feche e abra o novo modal como abaixo :

 $('#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 

Se você tentar fazer isso com o data-dismiss="modal" , ele terá o problema de rolagem mencionado por @gravity e @kuldeep nos comentários.

Nenhuma das respostas me ajudou desde que eu queria conseguir algo exatamente igual ao mencionado na pergunta.

Eu criei um plugin jQuery para essa finalidade.

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

Trabalhando Fiddle para referência, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/

Você só precisa invocar com minha nova API ” showStackedModal() ” em vez de apenas ” modal('show') “. A parte oculta ainda pode ser a mesma de antes e a abordagem empilhada de mostrar e ocultar os modais é automaticamente cuidada.

Solução simples e elegante para o Bootstrap 3.x. O mesmo modal pode ser reutilizado dessa maneira.

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

No primeiro modal:

substitua o link modal dismiss no rodapé com o link abaixo.

  

No segundo modal:

Em seguida, o segundo modal substitui div superior com tag abaixo div.

  

Tive o mesmo problema, escrevendo isso aqui no caso de alguém no futuro se deparar com isso e tem problemas com vários modais que tem que ter rolagem também (estou usando o Bootstrap 3.3.7)

O que fiz foi ter um botão como esse dentro do meu primeiro modal:

 
Open modal

Ele irá esconder o primeiro e depois exibir o segundo, e no segundo modal eu teria um botão de fechamento que ficaria assim:

 
Close

Então isso fechará o segundo modal e abrirá o primeiro e para fazer o trabalho de rolagem eu adicionei ao meu arquivo .css esta linha:

 .modal { overflow: auto !important; } 

PS: Apenas uma nota lateral, você tem que ter esses modais separadamente, o modal menor não pode ser nested no primeiro como você esconde o primeiro

Então aqui está o exemplo completo baseado no exemplo modal de bootstrap: