jquery - ventana - El apilamiento modal de Bootstrap elimina la barra de desplazamiento del navegador

scroll en ventana modal bootstrap

Question

Así que tengo un poco de apilamiento modal de arranque, siguiendo este ejemplo: http://miles-by-motorcycle.com/fv-b-8-670/stacking-bootstrap-dialogs-using-event-callbacks

Ahora, mientras el ejemplo funciona como se esperaba, el primer modal puede tener el potencial de expandir el alto de la página que requiere desplazamiento.

Sin embargo, si este es el caso, y un modal más pequeño es la pila en la parte superior, la barra de desplazamiento se elimina, y continúa para no aparecer incluso cuando el modal más pequeño se descarta.

http://jsfiddle.net/8N3T8/1/

<button name="openModalOne">Open 1</button>
<div id="modalone" class="modal" role="dialog" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Modal 1</h3>
            </div>
            <div class="modal-body" style="height: 2000px">
                <button name="stackone">Stack me</button>
            </div>
            <div class="modal-footer">
                <button name="closeone">Button 1</button>
            </div>
        </div>
    </div>
</div>
<div id="modaltwo" class="modal" role="dialog" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Modal 1</h3>
            </div>
            <div class="modal-body">
                This is a stacked modal            
            </div>
            <div class="modal-footer">
                <button name="closetwo">Close</button>
            </div>
        </div>
    </div>
</div>

$(document).ready(function(){
   $(''.modal'').on(''hidden.bs.modal'', function( event ) {
        $(this).removeClass(''fv-modal-stack'');
        $(''body'').data( ''fv_open_modals'', $(''body'').data(''fv_open_modals'')-1);
    });

    $(''.modal'').on(''shown.bs.modal'', function(){
        if ( typeof ( $("body").data( ''fv_open_modals'' ) ) == ''undefined'')
        {
            $(''body'').data( ''fv_open_modals'', 0 );
        }
        if($(this).hasClass(''fv-modal-stack''))
        {
            return;
        }
        $(this).addClass(''fv-modal-stack'');
        $(''body'').data(''fv_open_modals'', $(''body'').data(''fv_open_modals'')+1);
        $(this).css(''z-index'', 1040 +(10*$(''body'').data(''fv_open_modals'')));
        $(''.modal-backdrop'').not(''.fv-modal-stack'')
            .css(''z-index'', 1039 + (10*$(''body'').data(''fv_open_modals'')));
        $(''.modal-backdrop'').not(''fv-modal-stack'')
            .addClass(''fv-modal-stack'');
    }); 

    $("button[name=''openModalOne'']").on(''click'', function(){
        $("#modalone").modal(''show''); 
    });

    $("button[name=''stackone'']").on(''click'', function(){
       $("#modaltwo").modal(''show'');
    });
    $("button[name=''closetwo'']").on(''click'', function(){
       $("#modaltwo").modal(''hide'');
    });
    $("button[name=''closeone'']").on(''click'', function(){
       $("#modalone").modal(''hide'');
    });
});

¿Hay alguna manera de instruir al navegador sobre la verdadera altura del contenido?

Answer 1

podemos escuchar el evento '' hide '' en el modal 2. y recuperar la barra de desplazamiento con el método jquery css() :

// on ''hide'' event in modal 2
$(''#modaltwo'').on(''hide.bs.modal'', function () {
    $("#modalone").css("overflow-y", "auto"); // ''auto'' or ''scroll''
});

demo: http://jsfiddle.net/8N3T8/2/

Answer 2

La solución proporcionada por @ meni181818 funciona bien pero crea una barra de desplazamiento vertical adicional. Después de mucha búsqueda terminé con la siguiente solución que funciona perfectamente sin ninguna barra de desplazamiento vertical adicional.

$("your second modal id").on(''hidden.bs.modal'', function (e) {

        if($(''.modal.in'').css(''display'') == ''block''){

            $(''body'').addClass(''modal-open'');
        }

    });

Answer 3

$(document).ready(function() {
    var $body = $(''body'');
    var originalBodyPad = parseInt($body.css(''padding-right''), 10);

    var measureScrollbar = function () {
        // almost exact copy of source of modal.js
        var scrollDiv = document.createElement(''div'');
        scrollDiv.className = ''modal-scrollbar-measure'';
        $body.append(scrollDiv);
        var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        $body[0].removeChild(scrollDiv);
        return scrollbarWidth;
    };

    $(".modal").on(''hidden.bs.modal'', function (e) {
        var $visible_modals = $(''.modal:visible'');
        if( $visible_modals.length > 0 ) {
            $body.css(''padding-right'', originalBodyPad + measureScrollbar());
            $(''body'', document).addClass(''modal-open'');
        }
    });
});

Echa un vistazo a la demostración: http://jsfiddle.net/grbrLrdw/

También puede usar mi arreglo bootstrap-multi-modal, que se encuentra aquí: https://github.com/sbreiler/bootstrap-multi-modals