Así, estoy usando este código para abrir otra ventana modal en una corriente abrió la ventana modal:

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

Lo que pasa es que para como 500ms la barra de desplazamiento se duplicará. Supongo que porque el actual modal todavía está desapareciendo. Sin embargo se ve muy onu-suave y la tartamudez.

Agradecería cualquier sugerencia para resolver este problema.

También, es la manera de construir este en un evento onclick poco profesional?

Estoy trabajando con la versión de bootstrap 3.0.

Edit: supongo que es necesario para reducir el tiempo de desvanecimiento de un modal. ¿Cómo es esto posible?

InformationsquelleAutor AlexioVay | 2013-10-22

19 Comentarios

  1. 72

    data-dismiss hace la actual ventana modal cerca de la fuerza

    data-toggle abre una ventana modal con los href contenido en su interior

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

    o

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

    no vamos a saber si funciona.

    • Gracias, funciona y evita el uso de «onclick». Pero el animatiom aún se duplica la barra de desplazamiento para un segundo.
    • Alguna sugerencia?
    • eso es lo que data-dismiss hace. Se cierra la ventana actual y se abre uno nuevo. Puede publicar su código en bootply o jsfiddle ?
    • El desplazamiento no funciona en el segundo modal si la altura es de largo.
    • Mismo aquí con bootstrap v4. Cuando hago clic en el botón en la primera mondal se abre enother modal, la segunda modal muestra con desplazamiento del cuerpo. El problemas está en la clase .modal-abierto para el cuerpo. Se quita cuando hacemos clic y no se agrega de nuevo.
    • Puede ser que algunos se han solución? jsbin.com/xonuqamuli/edit?html salida
    • sí thts correcto.. ¿cuál es la solución para evitar el desplazamiento. cuando cualquier modal abrir.. /?
    • No han descubierto que uno mismo
    • La solución a esa pregunta es para quitar el .fade clase de TODOS los div modal que están utilizando el uno al otro. Así <div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-hidden="true"> se Convierte en <div class="modal" id="modal-1" tabindex="-1" role="dialog" aria-hidden="true"> Y todos sus problemas con esta barra de desplazamiento se han ido! 😛 Espero que ayude.
    • antigua ventana de cierre, pero la nueva ventana no se abre
    • .modal { overflow-y: auto } resuelve el BS4 desplazamiento problema.

  2. 72

    Mi solución no cerca de la parte inferior modal, pero realmente las pilas en la parte superior de la misma. Se conserva el comportamiento del desplazamiento correctamente. Probado en Bootstrap 3. Para los modales de la pila como se esperaba, debes tener ordenado en el código Html de menor a mayor.

    JS:

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

    ACTUALIZACIÓN: Cuando se han puesto los modales, todos los telones de fondo aparecen debajo de la parte inferior de modal. Usted puede fijar que añadir el siguiente código CSS:

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

    Esto dará la apariencia de un modal telón de fondo por debajo de la superior visible modal. De esa manera se difumina la parte inferior de modales debajo.

    • ¿Por qué el orden de los verbos modales de la materia en el código HTML? He experimentado esto.
    • Los artículos más adelante en el marcado de página tienen un natural mayor z-index y se acumulará en la parte superior de los elementos que apareció anteriormente en el marcado. A menos que usted establezca una explícita z-index.
    • Perro: es exactamente lo que yo necesitaba 🙂 funciona perfecto. gracias!
    • Esto fue lo que me crezca el pelo para que yo pudiera tirar de él hacia fuera. Gran solución, gracias!!!
    • Verdaderamente legendario!! Me da la vuelta cada vez que alguien sugiere utilizar un plugin para este… sólo quería tener una solución simple para un problema sencillo y hay que ir… Saludos!
    • Excelente gracias por TU ayuda .Su solución fue soved mi problema , cuando utilizo dos verbos modales mismo tiempo !!!!!
    • usted salvó mi vida
    • Este debe ser marcada como la mejor respuesta. solución mínima. funcionaba perfecto.
    • Javascript trabajado para el Bootstrap 4, sin embargo, el CSS no lo hizo. En lugar de eso me escondí el telón de fondo y, a continuación, añadió .modal:after { content: «»; display: block; fondo: rgba(0,0,0, .5); position: fixed; top: 0; bottom: 0; width: 100%; z-index: -1; }

  3. 14

    Realidad se puede detectar cuando la edad modal cierra llamando a la hidden.bs.modal evento:

        $('.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 info: http://getbootstrap.com/javascript/#modals-events

  4. 13

    probar este

    HTML:

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

    • fail para mí.. =( modal funciona, pero si la 1ª modal es el tiempo que un desplazamiento de la 1ª modal aparece y cuando se abre la 2ª modal y para cerrar la primera modal de desplazamiento no funciona.
  5. 10

    Modales en Modal:

    JS:

    $('.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);
    });

    HTML:

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

    • fail para mí.. =( modal funciona, pero si la 1ª modal es el tiempo que un desplazamiento de la 1ª modal aparece y cuando se abre la 2ª modal y para cerrar la primera modal de desplazamiento no funciona.
    • Ejemplo anterior genera modal en el lugar de la primera modal no en la parte superior ni en (el primero ya no es visible).
  6. 7

    Trabajando en un proyecto que tiene un montón de verbos modales llamando a otros verbos modales y un par de HTML chicos que no podría saber a iniciar cada vez para cada botón.
    Llegó a una conclusión similar como @gmaggio, a regañadientes después de ir por el camino más largo alrededor de primera.

    EDIT: Ahora es compatible con los modales se llama a través de javascript.

    EDIT: la Apertura de un desplazamiento modal de otro modal ahora funciona.

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

    Sólo tiene que colocar el modal de llamadas botón en forma normal, y si es recogido para ser dentro de un modal, se va a cerrar la actual primera antes de la apertura de la especificada en los datos de destino.
    Tenga en cuenta que relatedTarget es proporcionada por Bootstrap.

    También he añadido el siguiente para suavizar la desvaneciendo un poco:
    Estoy seguro de que más se puede hacer aunque.

    .modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
    }
    • No el 100% de su problema, pero la muestra.bs.modal de gancho es un poco la mano. Gestión de cuerpo.modal-clase abierta parece ser buggy en BS v. 3.3.5, después de cerrar un modal y la apertura de otro que está ausente, y por lo tanto el fondo se desplaza en lugar de la (segunda) modal. Su Gancho puede corregir ese comportamiento.
  7. 7

    Twitter docs dice el código personalizado es necesario…

    Esto funciona sin JavaScript,
    aunque, CSS personalizado sería muy recomendable…

    HTML:

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

    • He aquí otro ejemplo con el 2do modal está correctamente formateado, bootply.com/qRsvPSrcO5
    • cambiar el z-index, como hizo en el css es una buena idea… z-index: 1080 !important;
    • Si se abre la 2ª modal y haga clic en el exterior va a ser intervenida. (Chrome, el más reciente)
    • tal vez estoy equivocado, pero creo que los médicos dicen que no hay que poner un modal en un modal, de modo que es algo que no sorprende
  8. 4

    Intente 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 sencillo hack funciona para mí.

  9. 4

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

    JS:

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

    HTML:

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

    • Esto es genial, el único problema de la izquierda es para prevenir la re-aparición de la barra de desplazamiento cuando el superior modal está cerrado
  10. 4

    Para el bootstrap 4, para ampliar @helloroy la respuesta que he utilizado el 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 tiene ningún efecto cuando sólo hay un modal, sólo se enciende por múltiplos. En segundo lugar, los delegados de la manipulación del cuerpo para asegurar el futuro de los modales que no son generados en la actualidad están siendo atendidos.

    Actualización

    De mudarse a un js/css solución combinada mejora la apariencia – la animación de desvanecimiento continúa trabajando en el telón de 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 va a manejar modales anidados hasta una profundidad de 4, que es más de lo que necesita.

  11. 4

    Actualización para el 2018, Usando Bootstrap 4

    Encontré que la mayoría de las respuestas parecen tener un montón de innecesario jQuery. Para abrir un modal de otro modal puede hacerse simplemente mediante el uso de los eventos que Bootstrap ofrece como «show.bs.modal». Usted también puede querer un poco de CSS para controlar el telón de fondo de las superposiciones. Aquí están los 3 abra modal de otro de los escenarios…

    Abrir modal de otro modal (mantener 1er 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 potencial problema en este caso es que el telón de fondo de la 2ª modal ocultar el 1 de modal. Para evitar esto, realice la 2ª modal data-backdrop="static", y añadir un poco de CSS para solucionar el z-índices de los telones de fondo..

    /* 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 de otro modal (cerca de 1 de modal)

    Esto es similar a la situación descrita anteriormente, pero ya estamos cerrando el 1 de modal cuando la 2da es abierto, no hay necesidad de que el telón de fondo CSS fix. Una simple función que se encarga de la 2ª modales show.bs.modal evento cierra el 1 de modal.

    $(«#myModal2»).en(‘mostrar.bs.modal’, function (e) {
    $(«#myModal1»).modal(«hide»);
    });

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


    Abrir modal dentro de otro modal

    La última múltiples modales escenario es la apertura de la 2ª modal dentro de la 1ª modal. En este caso el marcado para el 2º se coloca dentro de la 1er. Sin CSS o jQuery es necesario.

    <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

    • Gracias amigo ,Su trabajo para mí.
  12. 2

    También tuve algunos problemas con mi desplazable modales, así que hizo 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 en un modal que viene a aparecer.
    Tenga en cuenta que la primera cerrada de modo que el segundo puede aparecer.
    No hay cambios en la secuencia de arranque de la estructura.

  13. 2

    Mi código y el trabajo tan bueno
    el uso de datos descartar

    <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>
  14. 2

    Yo fuimos una especie de ruta diferente todos juntos, me decidí a «De-Nido» de ellos. Tal vez alguien se encuentra con este práctico…

    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.
    • Muchas gracias
  15. 1

    Cerrar la primera modal de Bootstrap y la apertura de la nueva modal de forma dinámica.

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

    La respuesta dada por H Perro es grande, pero este enfoque era en realidad me da algunos modal parpadeo en Internet Explorer 11.
    Bootstrap primero ocultar el modal de la eliminación de la ‘modal-abierto’ de la clase y, a continuación, (el uso de H Perros solución) añadimos el ‘modal-abrir’ clase de nuevo. Sospecho que esto de alguna manera está causando el parpadeo que estaba viendo, tal vez debido a la lenta html/css de representación.

    Otra solución es evitar bootstrap en la eliminación de la ‘modal abre’ la clase del elemento de cuerpo en primer lugar.
    El uso de bootstrap 3.3.7, este reemplazo de los internos hideModal función funciona a la perfección 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')
    })
    }

    De este reemplazo, el ‘modal-open de la clase que sólo se quita cuando no se detectan los modales en la pantalla. Y evitar un marco de eliminar y añadir una clase al elemento body.

    Sólo incluyen el reemplazo después de bootstrap se han cargado.

  17. 0

    ¿Por qué no cambiar el contenido de la modal cuerpo?

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

    En el modal acabo de poner un enlace o un botón

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

    Si sólo desea cambiar entre 2 verbos modales:

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

    En el modal acabo de poner un enlace o un botón

        <a href="Javascript: switchModal(); return false;">
    click here to switch to the second modal</a>
    • Eso es más como un UX relacionados con la respuesta, porque yo necesitaba esto para mostrar un mensaje de error relacionado Modal #1. Así Modal #2 tenía el mensaje de error. Pero hace años, ahora ya hice esta pregunta y me estoy haciendo este tipo de cosas de manera diferente ahora.
  18. -4

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

Dejar respuesta

Please enter your comment!
Please enter your name here