Problema modal de Bootstrap: el desplazamiento se desactiva

Question 1

Tengo un modal y dentro de ese modal, hay un menú desplegable que muestra un gran contenido oculto, que está funcionando.

Ahora, cuando abre el siguiente modal, apilado encima del primer modal y lo descarta, el desplazamiento en el modal debajo se deshabilita.

He creado un ejemplo completo, incluidos los pasos para replicar el problema al que me enfrento. Puedes verlo aquí .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <title></title>
    <style>

    </style>
</head>
<body>


    <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >

    <div class="modal fade" id="modal_1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">First Modal</h4>
                </div>
                <div class="modal-body">



                    <form class="form">

                        <div class="form-group">
                            <label>1) Open This First: </label>
                            <input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
                        </div>

                        <div class="form-group">
                            <label>2) Change this once you have opened the modal above.</label>
                            <select id="change" class="form-control">
                                <option value="small">Show Small Content</option>
                                <option value="large">Show Large Content</option>
                            </select>
                        </div> 

                        <div id="large" class='content-div'>
                            <label>Large Textarea Content.. Try and scroll to the bottom..</label>
                            <textarea rows="30" class="form-control"></textarea>

                        </div>

                        <div id="small" class='content-div'>
                            <label> Example Text Box</label> 
                            <input type="text" class="form-control">
                        </div>  


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal_2">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Second Modal</h4>
                </div>
                <div class="modal-body">

                    <hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script>

    $(document).ready(function() {


        $(".content-div").hide();
        $("#change").change(function() {
            $(".content-div").hide();
            $("#" + $(this).val()).show();
        });


    });

</script>
</html>

Aquí hay un Bootply para mostrar el comportamiento en acción:

Bootply

Question 2

Esta también es una solución

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto funciona bien :) Esto realmente arreglará cualquier modal que se ejecute más alto que el tamaño de su pantalla.

Question 3

Esto se debe a que cuando cierra un modal, elimina el modal-opende la <body>etiqueta. Bootstrap no admite múltiples modales en la misma página (al menos hasta BS3).

Una forma de hacerlo funcionar es usar el hidden.bs.modalevento desencadenado por BS al cerrar un modal, luego verificar si hay otro modal abierto para forzar la modal-openclase en el cuerpo.

// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
    if($('.modal.in').length > 0)
    {
        $('body').addClass('modal-open');
    }
});

Question 4

He encontrado una solución para ti. No estoy seguro de por qué no funciona, pero solo un código de línea en su CSS resolverá el problema. Después de cerrar el segundo modal, el primero está recibiendooverflow-y:hidden alguna manera. Incluso si está configurado en autorealidad.

Necesita reescribir esto y establecer su propia declaración en CSS:

#modal_1 {
    overflow-y:scroll;
}

Aquí tienes una DEMO funcional

Editar : enlace incorrecto, lo siento.

Question 5

$(document).ready(function () {

 $('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box
        if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close
            $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page
        }
    });
});
//this code segment will activate parent modal dialog 
//after child modal box close then scroll problem will automatically fixed

Question 6

Siga https://github.com/nakupanda/bootstrap3-dialog/issues/70 add

.modal { overflow: auto !important; }

a tu css

Question 7

¡Para bootstrap 4 tuve que agregar!

.modal {
    overflow-y: auto !important;
}

Si esto no se hace, no funciona y no se aplica.

captura de pantalla

Question 8

En primer lugar, Bootstrap no admite varios modales abiertos. Vea aquí: Bootstrap Modal docs

No se admiten varios modales abiertos. Asegúrese de no abrir un modal mientras otro aún esté visible. Mostrar más de un modal a la vez requiere un código personalizado.

Pero, si es necesario, puede agregar este bit de CSS en su hoja de estilo personalizada, siempre que esté incluido después de la hoja de estilo principal de Bootstrap:

.modal {
    overflow-y:auto;
}

Question 9

Resolví el problema quitando data-dismiss="modal" y agregando

setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');

Espero eso ayude

Question 10

Bootstrap no admitía varios modales al mismo tiempo. Es un error de Bootstrap. Simplemente agregue el siguiente script para BS4.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});

Question 11

$('.modal').css('overflow-y', 'auto');

Question 12

Supongo que esto se debe a un error en el arranque de Twitter. Parece eliminar la modal-openclase del cuerpo incluso si hay dos modales abiertos. Puede realizar una prueba para la removeClassfunción de jQuery y omitirla si todavía hay un modal abierto (el crédito por la función base va a esta respuesta: https://stackoverflow.com/a/1950199/854246 ).

(function(){
    var originalRemoveClassMethod = jQuery.fn.removeClass;

    jQuery.fn.removeClass = function(){
        if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) {
            return this;
        }
        var result = originalRemoveClassMethod.apply( this, arguments );
        return result;
    }
})();

Question 13

Este código resolvió el mío, cuando se cerró la segunda ventana emergente, mi primera ventana emergente ya no puede desplazarse.

$('body').on('hidden.bs.modal', '#SecondModal', function (e) {
  if ($('#FirstModal').is(':visible')) { // check if first modal open 
    $('body').addClass('modal-open'); // re-add class 'modal-open' to the body because it was removed when we close the second modal
    $('#FirstModal').focus(); // Focus first modal to activate scrollbar
  }
});

Question 14

Es una especie de truco, pero me gusta cerrarlo y volver a abrirlo en el cierre modal para eliminar cualquier comportamiento extraño / no deseado. Si tiene el desvanecimiento desactivado, no puede notar que se cierra y se vuelve a abrir:

var $ModalThatWasOnTop= $('#ModalThatWasOnTop')

$ModalThatWasOnTop.on('hidden.bs.modal', function(e) {
     console.log('closing  modal that was on top of the other modal')
     $('#ModalThatWasCovered').modal('hide');
     $('#ModalThatWasCovered').modal('show');

});

Question 15

Agregue a través de JQuery la clase 'modal-open' al cuerpo. Supongo que el desplazamiento funciona en todo excepto en el modal.

Como comentario a las respuestas anteriores: agregar la propiedad de desbordamiento al modal (a través de CSS) ayuda, pero luego tendrá dos barras de desplazamiento en la página.

Question 16

Esta también es una solución

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}

Question 17

De hecho, he descubierto una solución para esto. En realidad, debe habilitar el desplazamiento para el cuerpo de su página si está utilizando $('#myModal').hide();para ocultar un modelo. Simplemente escriba la siguiente línea después $('#myModal').hide();:

$('body').attr("style", "overflow:auto")

Esto volverá a habilitar el desplazamiento.

Question 18

Si está utilizando bootstrap3 o 4, asegúrese de tener una clase modal-open en html body. No estoy seguro de si esto es obligatorio, pero quizás asegúrese de que su índice z de modal-backdrop esté borrado.

    $('.your-second-modal').on('hidden.bs.modal', function (e) {
        $('.your-second-modal').css('z-index', "");
        $('.modal-backdrop').css('z-index', 1040);
        $('body').addClass("modal-open");
    });

Question 19

Agregue esto debajo del código js

    $(document).on("click",".modal",function () {
       if(!$("body").hasClass('modal-open'))
           $("body").addClass('modal-open');
    });