jquery – Bootstrap模式堆栈删除浏览器滚动条

所以我有一点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');
    });
});

有没有办法指示浏览器内容的真实高度？

我们可以在模态2上收听’ hide‘事件,并使用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/