Clever Geek Handbook

Bootstrap modal styling removes browser scrollbar

So I have a bit of bootstrap modal stack following this example: http://miles-by-motorcycle.com/fv-b-8-670/stacking-bootstrap-dialogs-using-event-callbacks

Now that the example works as intended, the first modal may have the potential to increase the height of the page that needs scrolling.

However, if it is, and the smaller modal stack is on top, the scrollbar is removed, and continues to appear even when the smaller modal is rejected.

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

Is it possible to tell the browser the true height of the content?

+3


source to share


3 answers


we can listen to the hide 'event on modal 2.and return the scrollbar using the jquery css()

method:

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

+9


source


The solution provided by @ meni181818 works well, but it creates an extra vertical scrollbar. After a lot of searching, I ended up with the following solution, which works fine without the extra vertical scrollbar.



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

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

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

    });
+2


source 


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

Take a look at the demo: http://jsfiddle.net/grbrLrdw/

You can also use my bootstrap-multi-modal fix found here: https://github.com/sbreiler/bootstrap-multi-modals

0


source






More articles:


All Articles