jQuery Bootstrap 模态中的 jQueryUI 自动完成显示在模态下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22621160/
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
jQueryUI autocomplete in Bootstrap modal displaying underneath modal
提问by FstaRocka
I have a jQueryUI autocomplete in a Bootstrap modal window. When I run it normally in the page it works fine, but when I try add it into the modal the list appears behind the modal, not in front.
我在 Bootstrap 模式窗口中有一个 jQueryUI 自动完成功能。当我在页面中正常运行它时，它工作正常，但是当我尝试将它添加到模态时，列表出现在模态后面，而不是前面。
I've tried variations of the following with no luck:
我尝试了以下变体但没有运气：
$("#myModal").css("z-index", "1500");
$("tags'.$fieldname.'").css("z-index", "5000");
In the modal:
在模态中：
data-backdrop="false"
Here is the source:
这是来源：
<!-- RFQ Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="z-index:2000;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" data-backdrop="false" >
<script>
$(function ps2() {
var availableTagsps2 = [
{label:"3rd It Tech (IS# 20)", value:20},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14}
];
$("#tagsps2").autocomplete({
source: availableTagsps2
});
$( "#tagsps2" ).autocomplete({
source: availableTagsps2,
select: function ps2(event, ui) {
var selectedObj = ui.item;
$(this).val(selectedObj.label);
$('input[name="ps2"]').val(selectedObj.value);
return false;
}
});
/* $("#myModal").css("z-index","6000");
$("#tagsps2").css("z-index","20000");*/
});
</script>
<input type="text" id="tagsps2" required AutoComplete="off" placeholder="Search..."
class="inputMed inline form-control input-med" />
<input type="hidden" name="ps2" value="" />
<div class="row" >
<div class="col-md-6">
<form role="form">
<div class="form-group" >
<!-- <input type="text" class="form-control" placeholder="Select client" required> -->
</div>
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
</div>
<div class="col-md-6">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
<a href="dashboard.php?vrfq" class="light">View Sent RFQ's</a>
</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end modal -->
<a href="#" data-toggle="modal" data-target="#myModal"><div class="RightCounter">& nbsp;</div><h2>RFQ</h2></a>
回答by glastonbridge
Using Bootstrap 3.1.1 I found it sufficient just to add the following CSS to get the autocomplete to work.
使用 Bootstrap 3.1.1 我发现只需添加以下 CSS 即可使自动完成功能正常工作。
.ui-autocomplete {
z-index: 5000;
}
The ui-autocomplete class is attached to the UL which is used internally to construct the autocomplete. By giving it a crazy high z-index you effectively ensure it will be laid out above everything else in the page including the modal dialog.
ui-autocomplete 类附加到内部用于构造自动完成的 UL。通过给它一个疯狂的高 z-index，您可以有效地确保它位于页面中的所有其他内容之上，包括模态对话框。
回答by bsandhu
jQuery autocomplete has a built in CSS class for this purpose. Just add 'ui-front' class to a container element in the Bootstrap modal.
为此，jQuery 自动完成有一个内置的 CSS 类。只需将 'ui-front' 类添加到 Bootstrap 模式中的容器元素。
.. the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element
.. 将检查输入字段的父级是否为 ui-front 类。如果找到具有 ui-front 类的元素，则菜单将附加到该元素
回答by Sergey
Use appendTooption instead css modifications: http://api.jqueryui.com/1.10/autocomplete/#option-appendTo
使用appendTo选项代替 css 修改：http: //api.jqueryui.com/1.10/autocomplete/#option-appendTo
回答by never giveup
$("tags'.$fieldname.'").css("zIndex", 5000);
回答by ainos
What worked for me:
什么对我有用：
<input type="text" id="country" class="form-control" onclick="data()" />
and then in javascript:
然后在javascript中：
var countries = [
{ value: 'Andorra', data: 'AD' },
{ value: 'Zimbabwe', data: 'ZZ' }
];
function data(){
$('#country').autocomplete({
lookup: countries,
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});
}
回答by Eric
I needed both of the answers from glastonbridge and bsandhu to make this work, as the 'ui-front' class only adds a z-index of 100.
我需要 glastonbridge 和 bsandhu 的两个答案才能完成这项工作，因为“ui-front”类只添加了 100 的 z-index。
Also, the "ui-front" class needed to be on a div that immediately wrapped my input control to get consistent results.
此外，“ui-front”类需要位于立即包装我的输入控件的 div 上，以获得一致的结果。
I'm using BS 3.3.7, jQ 3.1.1, and jQUI 1.12.1.
我使用的是 BS 3.3.7、jQ 3.1.1 和 jQUI 1.12.1。
回答by Tushar Maroo
I had a similar issue. Try adding following:
我有一个类似的问题。尝试添加以下内容：
Below Input field of tags, add a div with id="tags_container"like this:
在标签的输入字段下方，添加一个 div，id="tags_container"如下所示：
<input type="text" id="tagsps2" required AutoComplete="off" placeholder="Search..." class="inputMed inline form-control input-med" />
<div id="container_tags">
</div>
Then add following css:
然后添加以下css：
.ui-autocomplete {
position: absolute;
}
#container_tags {
display: block;
position:relative
}
This should fix your alignment issue.
这应该可以解决您的对齐问题。
