Bootstrap: abre otro modal en modal

95

Entonces, estoy usando este código para abrir otra ventana modal en una ventana modal abierta actual:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

Lo que sucede es que durante unos 500 ms la barra de desplazamiento se duplicará. Supongo que porque el modal actual todavía se está desvaneciendo. Sin embargo, parece muy poco suave y tartamudeante.

Agradecería cualquier sugerencia para resolver este problema.

Además, ¿la forma de construir esto en un evento onclick no es profesional?

Estoy trabajando con la versión 3.0 de bootstrap.

Editar: Supongo que es necesario reducir el tiempo de desvanecimiento de un modal. ¿Cómo es esto posible?

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3 AlexioVay
fuente

3

Se puede encontrar un ejemplo de trabajo en bootply.com/lvKQA2AM28

CrandellWS

86

data-dismiss hace que la ventana modal actual se cierre con fuerza

data-toggleabre un nuevo modal con el hrefcontenido dentro de él

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

o

<a data-dismiss="modal" onclick="call the new div here">Click</a>

háganos saber si funciona.

Es posible que también desee echar un vistazo a la documentación modal

jayeshkv
fuente

Gracias, funciona y evita el uso de "onclick". Pero la animación aún duplica la barra de desplazamiento por un segundo.

AlexioVay

@ user2829128 eso es lo que data-dismisshace. Cierra la ventana actual y abre una nueva. ¿Puedes publicar tu código en bootplyo jsfiddle?

jayeshkv

14

El desplazamiento no funcionaría en el segundo modal si la altura es larga.

Giraldi

Lo mismo ocurre con bootstrap v4. Cuando hago clic en el botón en el primer mondal, se abre en otro modal, el segundo modal se muestra con el desplazamiento del cuerpo. Los problemas están en la clase .modal-open for body. Se quita cuando hacemos clic y no se vuelve a agregar.

fdrv

7

.modal { overflow-y: auto }resuelve el problema de desplazamiento BS4.

Riki137

84

Mi solución no cierra el modal inferior, pero realmente se acumula encima de él. Conserva el comportamiento de desplazamiento correctamente. Probado en Bootstrap 3. Para que los modales se apilen como se espera, debe tenerlos ordenados en su marcado Html de menor a mayor.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

Expandir fragmento

ACTUALIZACIÓN: cuando haya apilado los modales, todos los fondos aparecen debajo del modal más inferior. Puede solucionarlo agregando el siguiente CSS:

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

Esto dará la apariencia de un fondo modal debajo del modal visible más alto. De esa manera, atenúa los modales inferiores debajo.

Perro H
fuente

2

Los elementos que aparecen más adelante en el marcado de la página tienen un índice Z naturalmente más alto y se apilarán sobre los elementos que aparecieron anteriormente en el marcado. A menos que establezca un índice z explícito.

H Dog

1

@H Dog: exactamente lo que necesitaba :) funciona perfecto. ¡Gracias!

Tobias Koller

2

¡¡Verdaderamente legendario !! Cambié cada vez que alguien sugirió usar un complemento solo para esto ... solo quería tener una solución simple para un problema simple y listo ... ¡Salud!

Viernes

2

Muchas gracias, por TU ayuda. ¡¡¡¡Tu solución fue solucionada mi problema, cuando uso dos modales al mismo tiempo !!!!!

Levon

3

Javascript funcionó para Bootstrap 4, sin embargo, CSS no. En su lugar, oculté el fondo y luego agregué .modal: after {content: ""; bloqueo de pantalla; fondo: rgba (0,0,0, .5); posición: fija; arriba: 0; abajo: 0; ancho: 100%; índice z: -1; }

Jason G.

28

Para abrir otra ventana modal en una ventana modal abierta actualmente,
puede usar bootstrap-modal

DEMO de bootstrap-modal

suhailvs
fuente

El uso de este modo de arranque desplaza el contenido de fondo hacia la derecha.

Brian

@Brian - ver aquí: stackoverflow.com/questions/46339063/…

lfkwtz

18

prueba esto

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	
      </div>      
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	
        content
      	
      </div>      
    </div>
  </div>
</div>
  

</body>
</html>

Expandir fragmento

Elon Gomes Vieira
fuente

1

falla para mí .. = (el modal funciona pero si el primer modal es largo, aparece un desplazamiento para el primer modal y cuando abres el segundo modal y lo cierras, el primer desplazamiento modal no funciona.

Vincent Dapiton

Muchas gracias, fue de gran ayuda :)

Daniel Muñoz

17

De hecho, puede detectar cuándo se cierra el antiguo modal llamando al hidden.bs.modalevento:

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

Para más información: http://getbootstrap.com/javascript/#modals-events

Giraldi
fuente

16

Actualización para 2018: uso de Bootstrap 4

Encontré que la mayoría de las respuestas parecen tener una gran cantidad de jQuery innecesario. Para abrir un modal desde otro modal se puede hacer simplemente usando los eventos que proporciona Bootstrap como show.bs.modal. También puede querer algo de CSS para manejar las superposiciones de fondo. Aquí están los 3 modal abiertos de otros escenarios ...

Abrir modal desde otro modal (mantener el primer modal abierto)

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

Un problema potencial en este caso es que el telón de fondo del segundo modal oculta el primer modal. Para evitar esto, haga el segundo modal data-backdrop="static"y agregue algo de CSS para arreglar los índices z de los fondos ...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl

Abrir modal desde otro modal (cerrar el 1er modal)

Esto es similar al escenario anterior, pero dado que estamos cerrando el primer modal cuando se abre el segundo, no hay necesidad de corregir el CSS de fondo. Una función simple que maneja el segundo show.bs.modalevento modales cierra el primer modal.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://www.codeply.com/go/ejaUJ4YANz

Abrir modal dentro de otro modal

El último escenario de múltiples modales es abrir el segundo modal dentro del primer modal. En este caso, el marcado para el segundo se coloca dentro del primero. No se necesita CSS o jQuery adicional.

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iSbjqubiyn

Zim
fuente

No funciona en Bootstrap 4. Cuando cierra el segundo modal, el primero ya no puede desplazarse.

Justin

@Justin: no veo un escenario específico que demuestre esto, y dado que el desplazamiento está fuera del alcance de la pregunta original. Le sugiero que busque o haga otra pregunta específica sobre el tema del desplazamiento.

Zim

nth-of-type no funcionó para mí porque no se ve en la clase. Lo tengo funcionando con:

.modal-backdrop.show + .modal.show {     z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show {     z-index: 1051 !important; }

webhead

14

Modales en modal:

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});
 
$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});

<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.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
             
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

        </div>
    </div>
</div>

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

Expandir fragmento

RedDevil2015
fuente

falla para mí .. = (el modal funciona pero si el primer modal es largo, aparece un desplazamiento para el primer modal y cuando abres el segundo modal y lo cierras, el primer desplazamiento modal no funciona.

Vincent Dapiton

El ejemplo anterior genera modal en lugar del primer modal ni arriba ni adentro (el primero ya no es visible).

JackTheKnife

Efecto muy agradable.

Jorge B.

¿Cómo es posible utilizar su solución en Semantic UI?

Vahidsamimi

9

Trabajando en un proyecto que tiene muchos modales llamando a otros modales y algunos tipos de HTML que quizás no sepan iniciarlo cada vez para cada botón. Llegué a una conclusión similar a la de @gmaggio, a regañadientes después de recorrer el camino más largo primero.

EDITAR: Ahora admite modales llamados a través de javascript.

EDITAR: Ahora funciona abrir un modal de desplazamiento desde otro modal.

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

Simplemente coloque el botón de llamada modal como de costumbre, y si se selecciona para que esté dentro de un modal, primero cerrará el actual antes de abrir el especificado en data-target. Tenga en cuenta que relatedTargetlo proporciona Bootstrap.

También agregué lo siguiente para suavizar un poco el desvanecimiento: estoy seguro de que se puede hacer más.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}

Ren
fuente

No es 100% su problema, pero el gancho modal que se muestra es algo útil. La gestión de la clase body.modal-open parece tener errores en BS v.3.3.5, después de cerrar un modal y abrir otro, falta y, por lo tanto, el fondo se desplaza en lugar del (segundo) modal. Tu Hook puede arreglar ese comportamiento.

Manuel Arwed Schmidt

7

Los documentos de Twitter dicen que se requiere un código personalizado ...

Esto funciona sin JavaScript adicional, aunque se recomienda encarecidamente CSS personalizado ...

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->

Expandir fragmento

CrandellWS
fuente

1

Aquí hay otro ejemplo con el segundo modal con el formato correcto bootply.com/qRsvPSrcO5

Zim

1

@Skelly cambiar el índice z como lo hizo en el CSS es una buena idea ...z-index: 1080 !important;

CrandellWS

4

Si abre el segundo modal y hace clic fuera, se corregirá. (Chrome, más reciente)

Martin Braun

tal vez me equivoque, pero creo que los médicos dicen que no se debe poner un modal en un modal, por lo que no es sorprendente

CrandellWS

7

Para bootstrap 4, para expandir la respuesta de @ helloroy, usé lo siguiente; -

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

La ventaja de lo anterior es que no tendrá ningún efecto cuando solo hay un modal, solo se activa para múltiples. En segundo lugar, delega el manejo en el cuerpo para garantizar que se atiendan los futuros modales que no se generan actualmente.

Actualizar

Pasar a una solución combinada js / css mejora el aspecto: la animación de fundido continúa funcionando en el fondo; -

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

combinado con el siguiente CSS; -

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

Esto manejará modales anidados hasta 4 de profundidad, que es más de lo que necesito.

smartbloke
fuente

No funciona en Bootstrap 4. Cuando cierra el segundo modal, el primero ya no puede desplazarse.

Justin

4

Prueba esto:

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

Este simple truco funciona para mí.

cristiano
fuente

4

Para alguien que usa bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
  Launch demo modal a
</button>

<div class="modal fade" id="modal-a" 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">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" 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">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" 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">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Expandir fragmento

Helloroy
fuente

Esto es genial, el único problema que queda es evitar la reaparición de la barra de desplazamiento cuando el modal superior está cerrado

HyperActive

¿Cómo puedo usar su solución en la interfaz de usuario semántica?

vahidsamimi

2

También tuve algunos problemas con mis modales desplazables, así que hice algo como esto:

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

Servirá para cualquier modal dentro de un modal que venga a aparecer. Tenga en cuenta que el primero está cerrado, por lo que el segundo puede aparecer. No hay cambios en la estructura de Bootstrap.

Teefars
fuente

2

Tomé una ruta diferente todos juntos, decidí "Des-Nest". Quizás alguien encuentre esto útil ...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.

Dylan Hayes
fuente

Muchas gracias

2

Mi código funciona bien con el descarte de datos.

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>

usuario3675926
fuente

1

Cierre el primer modal de Bootstrap y abra el nuevo modal de forma dinámica.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);

Abhishek
fuente

1

¿Por qué no cambiar simplemente el contenido del cuerpo modal?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

En el modal solo pon un enlace o un botón

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

Si solo desea cambiar entre 2 modales:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

En el modal solo pon un enlace o un botón

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>

Carlo
fuente

Eso es más como una respuesta relacionada con UX, porque necesitaba esto para mostrar un mensaje de error con respecto al Modal # 1. Entonces Modal # 2 tenía el mensaje de error. Pero han pasado años desde que hice esta pregunta y ahora estoy haciendo este tipo de cosas de manera diferente.

AlexioVay

0

prueba esto:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});

Rakesh Vadnal
fuente

0

La respuesta dada por H Dog es excelente, pero este enfoque en realidad me estaba dando un parpadeo modal en Internet Explorer 11. Bootstrap primero ocultará el modal eliminando la clase 'modal-open', y luego (usando la solución H Dogs) agregamos el clase 'modal-open' de nuevo. Sospecho que esto de alguna manera está causando el parpadeo que estaba viendo, tal vez debido a una representación lenta de HTML / CSS.

Otra solución es evitar el arranque en la eliminación de la clase 'modal-open' del elemento del cuerpo en primer lugar. Usando Bootstrap 3.3.7, esta anulación de la función interna hideModal funciona perfectamente para mí.

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

En esta anulación, la clase 'modal-open' solo se elimina cuando no hay modales visibles en la pantalla. Y evita que un marco elimine y agregue una clase al elemento del cuerpo.

Solo incluya la anulación después de que se haya cargado el bootstrap.

Adán
fuente

-4

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

Alex Sh.
fuente

Bootstrap: abre otro modal en modal

Respuestas: