Bootstrap :在一个模态对话框中,我如何使下拉菜单扩展到对话框之外?

kgsdhlau  于 12个月前  发布在  Bootstrap
关注(0)|答案(2)|浏览(113)

示例代码:
http://jsfiddle.net/vpg5g/
我想有从按钮下拉菜单扩展超过模态的边界。如您所见,当前状态不可用。有什么办法可以做到这一点吗?

bq8i3lrv

bq8i3lrv1#

模态不允许任何溢出,你可以通过使用来修复它:

.modal { overflow: visible; }
.modal-body { overflow-y: visible; }

Working demo
您可能希望添加一个类,以便仅将这些规则应用于真正需要它的模态,以防此修复程序产生错误。

new9mtju

new9mtju2#

如果无法删除溢出:你可以这样做

$('.drop-down-inside-modal').on('click' , '.dropdown-toggle', function(event){
        var self = $(this);
        var selfHeight = $(this).parent().height();
        var selfWidth = $(this).parent().width();
        var selfOffset = $(self).offset();
        var selfOffsetRigth = $(document).width() - selfOffset.left - selfWidth;
        var dropDown = self.parent().find('ul');
        $(dropDown).css({position:'fixed', top: selfOffset.top + selfHeight , left: 'auto', right: selfOffsetRigth ,  width: '160px'});
    });

    function fixDropdownPosition(){
        var openDropdownButton = $('.drop-down-inside-modal.open');
        if($(openDropdownButton).length){
            var selfHeight = $(openDropdownButton).height();
            var selfWidth = $(openDropdownButton).width();
            var openDropdownButtonOffset = $(openDropdownButton).offset();
            var openDropdownButtonOffsetRigth = $(document).width() - openDropdownButtonOffset.left - selfWidth;
            var openDropdown = $(openDropdownButton).find('ul');
            $(openDropdown).css({position:'fixed', top: openDropdownButtonOffset.top + selfHeight , left: 'auto' , right: openDropdownButtonOffsetRigth, width: '160px'});
        };
    };

    $(".modal-body").unbind("scroll");
    $(".modal-body").scroll(function(){
        fixDropdownPosition();
    });

    $( window ).resize(function() {
        fixDropdownPosition();
    });

相关问题