jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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/

大佬总结

以上是大佬教程为你收集整理的jquery – Bootstrap模式堆栈删除浏览器滚动条全部内容,希望文章能够帮你解决jquery – Bootstrap模式堆栈删除浏览器滚动条所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。