jQueryUI自动完成了在模态下的Bootstrap模态显示。

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">&times;</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

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

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 Autocomplete docs

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

$("tags'.$fieldname.'").css("zIndex", 5000);

#4

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

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

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

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