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.
我在一个引导模式窗口中有一个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>
7 个解决方案
#1
43
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指数,你能有效地确保它在页面的其他所有内容之上,包括模态对话框。
#2
21
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模式中的容器元素。
jQuery自动完成文档
.. 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类的元素,菜单将被添加到该元素。
#3
1
$("tags'.$fieldname.'").css("zIndex", 5000);
#4
1
Use appendTo option instead css modifications: http://api.jqueryui.com/1.10/autocomplete/#option-appendTo
使用appendTo选项代替css修改:http://api.jqueryui.com/1.10/autocomplete/# optionappendto。
#5
1
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);
}
});
}
#6
0
I had a similar issue. Try adding following:
我有一个类似的问题。尝试添加:
Below Input field of tags, add a div with id="tags_container"
like this:
在标签的输入字段下面,添加一个id="tags_container"的div:
<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.
这将修复您的对齐问题。
#7
0
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索引。
Also, the "ui-front" class needed to be on a div that immediately wrapped my input control to get consistent results.
另外,“ui-front”类需要在一个div上,该div立即将我的输入控件包装起来以获得一致的结果。
I'm using BS 3.3.7, jQ 3.1.1, and jQUI 1.12.1.
我使用的是BS 3.3.7, jq3.1.1和jQUI 1.12.1。
#1
43
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指数,你能有效地确保它在页面的其他所有内容之上,包括模态对话框。
#2
21
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模式中的容器元素。
jQuery自动完成文档
.. 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类的元素,菜单将被添加到该元素。
#3
1
$("tags'.$fieldname.'").css("zIndex", 5000);
#4
1
Use appendTo option instead css modifications: http://api.jqueryui.com/1.10/autocomplete/#option-appendTo
使用appendTo选项代替css修改:http://api.jqueryui.com/1.10/autocomplete/# optionappendto。
#5
1
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);
}
});
}
#6
0
I had a similar issue. Try adding following:
我有一个类似的问题。尝试添加:
Below Input field of tags, add a div with id="tags_container"
like this:
在标签的输入字段下面,添加一个id="tags_container"的div:
<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.
这将修复您的对齐问题。
#7
0
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索引。
Also, the "ui-front" class needed to be on a div that immediately wrapped my input control to get consistent results.
另外,“ui-front”类需要在一个div上,该div立即将我的输入控件包装起来以获得一致的结果。
I'm using BS 3.3.7, jQ 3.1.1, and jQUI 1.12.1.
我使用的是BS 3.3.7, jq3.1.1和jQUI 1.12.1。