0

Buenas tardes, estoy usando bootstrap 3 y utilizo ventanas modal, el problema es que dentro de una ventana modal dando clic en un boton abro otra ventana modal, y cuendo le doy al boton de cerrar de la segunda ventana abierta, se cierran ambas ventas simultaneamente. ¿Se puede solucionar esto, para que cierren en forma independiente?. Imagino que el problema esta en la linea de codigo

<button type="button" class="btn btn-primary btn-xs" data-dismiss="modal">Cerrar</button>

que es se repite para ambas ventanas. Espero alguien de en la tecla. Gracias.

1 respuesta 1

1

Bootstrap deja en claro en su documentación que no se permiten los modales sobrepuestos, ya que esto requiere código personalizado.

Lo que puedes hacer es ocultar este ultimo de la siguiente manera

$('#modal2-Cerrar').on('click', function(evt){
  evt.preventDefault()
  $('#Modal2').modal('hide');
  $('#Modal1').modal('show');
});

y tu botón quedaría de la siguiente forma en el segundo modal:

<button type="button" id="modal2-Cerrar" class="btn btn-primary btn-xs">Cerrar</button>

y en el botón superior seria lo mismo. Quedando este de la siguiente manera:

<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

y en la función, el selector quedaría de esta forma $('#modal2-Cerrar, .close').on(...)

Actualizacion

Este ejemplo es usando dos modales con diferente id en el cual se usa la versión de bootstrap 3.3.7, funciona correctamente con los modales añadidos, pero el backdrop no cubre el primer modal (para hacer esto habría que jugar con jquery y css)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal1">
  Modal doble Default
</button>

<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal2">Lanzar segundo modal</button>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Segundo modal  -->
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Aqui estoy en un segundo modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Este segundo ejemplo es usando las funciones que te proporcione y quitando atributos que vienen por default, sucede lo mismo con el backdrop

$('#Modal2-cerrar, .close2').on('click', function() {
  $('#Modal2').modal('hide');
  $('#Modal1').modal('show');
});
$('#Modal1-cerrar, .close1').on('click', function() {
  $('#Modal1').modal('hide');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal1">
  Modal doble Ajustado
</button>

<!-- Modal -->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close close1"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal2">Lanzar segundo modal</button>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="Modal1-cerrar">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Segundo modal  -->
<div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close close2"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Aqui estoy en un segundo modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id='Modal2-cerrar'>Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

6
  • Hola Juan, graciass por tu tiempo, pero no soy usuario experimentado de js y se me complica el no tener todo el codigo, si fueras tan amable de completarlos, me sería muy util. Gracias. el 5 jul. 2017 a las 21:29
  • @RicardoPastuszek he actualizado la respuesta
    – JuankGlezz
    el 5 jul. 2017 a las 22:03
  • Se comprendio perfecto... mil gracias. el 5 jul. 2017 a las 22:21
  • @RicardoPastuszek si se ha solucionado el problema, te sugiero marcar la respuesta como aceptada en el check o palomita que aparece justo debajo de la puntuación, Esto es para evitar que se te ponga un limite de preguntas en un futuro, al igual que tus preguntas anteriores, si te han solucionado el problema marcarlas como aceptadas. Saludos
    – JuankGlezz
    el 5 jul. 2017 a las 22:25
  • Tu sabras disculpar... pero no encuentro el check al que te refieros... estimo que como soy nuevo usuario de Stackoverflow tal vez no tenga los privilegios de los mas antiguos. el 6 jul. 2017 a las 22:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.