Bootstrap 模态堆叠移除浏览器滚动条答案

【问题标题】：Bootstrap modal stacking removes browser scroll barBootstrap 模态堆叠移除浏览器滚动条
【发布时间】：2014-09-27 16:07:54
【问题描述】：

所以我有一点引导模式堆叠，按照这个例子： 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');
    });
});

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

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 modal-dialog viewport

【解决方案1】：

我们可以在modal 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/

【讨论】：

美丽的先生！我会投票，但显然我不够有名！非常感谢！
对我来说，当我把它放在 hidden.bs.modal 事件的末尾时，这很有效。此外，我更改了 jQuery 选择器，因此无需知道 id 即可工作：$('.modal.fv-modal-stack').css('overflow-y', 'auto');
简单易行的解决方案

【解决方案2】：

@meni181818 提供的解决方案效果很好，但它会创建额外的垂直滚动条。经过大量搜索后，我最终得到了以下解决方案，该解决方案无需任何额外的垂直滚动条即可完美运行。

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

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

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

    });

【讨论】：

太棒了！这对我来说非常有效，非常感谢。

【解决方案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');
        }
    });
});

看看演示：http://jsfiddle.net/grbrLrdw/

你也可以使用我的引导多模式修复，在这里找到：https://github.com/sbreiler/bootstrap-multi-modals

【讨论】：