Bootstrap modal: cerrar actual, abrir nuevo

He buscado por un tiempo, pero no puedo encontrar una solución para esto. Quiero lo siguiente:

• Abra una URL dentro de un modal Bootstrap. Tengo esto funcionando fuera de curso. Entonces el contenido se carga dinámicamente.
• Cuando un usuario presiona un botón dentro de este modal, quiero que el modal actual se oculte, e inmediatamente después de eso, quiero que se abra un nuevo modal con la nueva URL (en la que el usuario hizo clic). Este contenido del segundo modal también se carga dinámicamente.
• Si el usuario luego cierra ese segundo modal, el primer modal debe regresar nuevamente.

He estado mirando esto durante días, espero que alguien pueda ayudarme.

Gracias por adelantado.

Sin ver un código específico, es difícil darle una respuesta precisa. Sin embargo, desde los documentos de Bootstrap, puede ocultar el modal de esta manera:

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

Luego, muestra otro modal una vez que esté oculto:

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

Tendrá que encontrar una manera de enviar la URL a la nueva ventana modal, pero supongo que sería trivial. Sin ver el código, es difícil dar un ejemplo de eso.

Sé que esta es una respuesta tardía, pero podría ser útil. Aquí hay una forma adecuada y limpia de hacer esto, como @ karima se mencionó anteriormente. De hecho, puede disparar dos funciones a la vez; triggery dismissel modal.

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

Manifestación

No es exactamente la respuesta, pero es útil cuando desea cerrar el modal actual y abrir un nuevo modal.

En el html en el mismo botón, puede solicitar cerrar el modal actual con data-desechar y abrir un nuevo modal directamente con data-target:

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

El problema data-dismiss="modal"es que cambiará tu contenido a la izquierda.

Estoy compartiendo lo que funcionó para mí, la declaración del problema se estaba abriendo pop1desdepop2

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

Yo uso este método:

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

Al usar el siguiente código, puede ocultar el primer modal y abrir inmediatamente el segundo modal, al usar la misma estrategia, puede ocultar el segundo modal y mostrar el primero.

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

Debe agregar el siguiente atributo al enlace o botón donde desea agregar esta funcionalidad:

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

Un blog detallado: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

data-dismiss="modal" 

se utiliza para cerrar el modelo abierto existente. puedes configurarlo para el nuevo modelo

Como se mencionó anteriormente, en el html en el mismo botón, puede solicitar cerrar el modal actual con data-desechar y abrir un nuevo modal directamente con data-target:

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

Pero esto hará que la barra de desplazamiento desaparezca y notará que si el segundo modal era más largo que el primero

Entonces, la solución es agregar el siguiente estilo en el estilo en línea modal:

Style = "overflow-y : scroll ; "

Con BootStrap 3, puede probar esto: -

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

Probado para funcionar con: http://getbootstrap.com/javascript/#modals (primero haga clic en "Iniciar modo de demostración").

Tengo exactamente el mismo problema, y ​​mi solución es solo si el diálogo modal tiene el 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;}
    }
  });
});

Tuve el mismo problema que @Gravity Grave por el cual el desplazamiento no funciona si usas

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

en conjunto con

data-dismiss="modal"

El desplazamiento no funciona correctamente y vuelve a desplazarse por la página en lugar del modal. Esto se debe a que la eliminación de datos elimina la clase modal-open de la etiqueta.

Mi solución al final fue configurar el html del componente interno en el modal y usar css para desvanecer el texto dentro / fuera.

Usando la función de clic:

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

Aviso:

Asegúrate de que el que quieras mostrar sea un modal independiente.

En primer modal:

reemplace el enlace de descarte modal en el pie de página con el enlace de cierre a continuación.

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

En segundo modal:

Luego, el segundo modal reemplace el div superior con la etiqueta div inferior.

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

Tuve el mismo problema, escribiendo esto aquí en caso de que alguien en el futuro se tope con esto y tenga problemas con múltiples modales que también deben tener desplazamiento (estoy usando Bootstrap 3.3.7)

Lo que hice fue tener un botón como este dentro de mi primer modal:

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

Ocultará el primero y luego mostrará el segundo, y en el segundo modal tendría un botón de cierre que se vería así:

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

Entonces esto cerrará el segundo modal y abrirá el primero y para que el desplazamiento funcione agregué a mi archivo .css esta línea:

.modal {
overflow: auto !important;
}

PD: Solo una nota al margen, debes tener estos modales por separado, el modal menor no se puede anidar en el primero ya que ocultas el primero

Así que aquí está el ejemplo completo basado en el ejemplo modal de 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>

Prueba esto

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

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

Yo uso otra forma:

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

Si desea cerrar el modal abierto anteriormente mientras abre el nuevo modal, debe hacerlo desde javascript / jquery cerrando primero el modal abierto actual y luego otorgue un tiempo de espera de 400ms para permitir que se cierre y luego abra el nuevo modal como el siguiente código :

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

Si intenta hacerlo con el data-dismiss="modal", tendrá el problema de desplazamiento como lo mencionan @gravity y @kuldeep en los comentarios.

Ninguna de las respuestas me ayudó ya que quería lograr algo que fuera exactamente lo mismo que se menciona en la pregunta.

He creado un complemento jQuery para este propósito.

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

Working Fiddle para referencia, JSFiddle: https://jsfiddle.net/gumdal/67hzgp5c/

Solo tienes que invocar con mi nueva API " showStackedModal()" en lugar de solo " modal('show')". La parte oculta puede seguir siendo la misma que antes y el enfoque apilado de mostrar y ocultar los modales se soluciona automáticamente.

Solución simple y elegante para BootStrap 3.x. El mismo modal se puede reutilizar de esta manera.

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

si usa mdb use este código

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

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

Puede que llegue un poco tarde a esto, pero creo que he encontrado una solución que funciona.

Requerido -

jQuery

Todos los modales con un botón de cierre / descarte que tienen los atributos establecidos de la siguiente manera:

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

Consulte la clase close_modal agregada a las clases del botón

Ahora para cerrar todos los modales existentes, llamaremos

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

Entonces, donde quiera abrir un modal

Simplemente agregue el código anterior y todos sus modales abiertos se cerrarán.

Luego agregue su código normal para abrir el modal deseado

$("#DesiredModal").modal();

Ocultar cuadro de diálogo modal.

Método 1: usando Bootstrap.

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

Método 2: usar stopPropagation().

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

Método 3: después de la invocación del método mostrado.

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

Método 4: usar CSS.

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog

Este código, cierra modal abierto, abre el nuevo modal pero inmediatamente, se cierra el nuevo modal.

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

Mi solución para abrir un nuevo modal después de cerrar otro es:

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}

Simplemente copie y pegue este código y podrá experimentar con dos modales. El segundo modal está abierto después de cerrar el primero:

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

¡Salud!