Question

所以我有一点bootstrap模态堆叠，遵循这个例子： http://miles-by-motorcycle.com/fv-b-8-670/stacking-bootstrap-dialogs-using-event-callbacks

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

如果是这种情况，并且较小的模态在顶部堆叠，则滚动条被移除，即使较小的模态被解雇，也不会出现。

<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

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

Answer 2

@ meni181818提供的解决方案运行良好，但它创建了额外的垂直滚动条。经过大量的搜索后，我最终得到了完美的解决方案，没有任何额外的垂直滚动条。

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

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

您还可以使用我的bootstrap-multi-modal修复程序，可在此处找到：https://github.com/sbreiler/bootstrap-multi-modals

Bootstrap模式堆叠删除浏览器滚动条

3 个答案: