jquery - Bootstrap模态堆叠删除浏览器滚动条

Question

所以我有一些 Bootstrap 模式堆栈，按照这个例子: http://miles-by-motorcycle.com/fv-b-8-670/stacking-bootstrap-dialogs-using-event-callbacks

现在，虽然示例按预期工作，第一个模式有可能扩大需要滚动的页面的高度。

如果是这种情况，并且较小的模态堆栈在顶部，则滚动条将被删除，即使较小的模态被关闭，它仍然不会出现。

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

有没有办法告诉浏览器内容的真实高度？

Answer 1

我们可以听'hide ' 模态 2 上的事件并使用 jquery css() 返回滚动条方法:

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

演示:http://jsfiddle.net/8N3T8/2/