Html Bootstrap：在模态对话框中，如何使下拉菜单在对话框外展开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11899870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: In a modal dialog, how do I make the dropdown menu expand outside the dialog?
提问by flyx
Example code:
示例代码：
I'd like to have the menu that drops down from the button expand over the modal's borders. As you see, the current state is unusable. Is there some way to achieve this?
我想让从按钮下拉的菜单扩展到模态的边框上。如您所见，当前状态不可用。有什么方法可以实现这一目标吗？
回答by Sherbrow
The modal does not allow any overflowing, you can fix it by using :
模态不允许任何溢出，您可以使用以下方法修复它：
.modal { overflow: visible; }
.modal-body { overflow-y: visible; }
You may want to add a class to apply those rules only to modals that really need it, in case this fix creates bugs.
您可能想要添加一个类来将这些规则仅应用于真正需要它的模态，以防此修复程序产生错误。
回答by ppollono
If you cannot remove the overflow: auto You can do something like this
如果你不能删除溢出： auto 你可以做这样的事情
$('.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();
});
