jQueryUI在Bootstrap模式下自動完成模態顯示

Question

我在Bootstrap模式窗口中有一個jQueryUI自動完成。當我在頁面中正常運行它時，它工作正常，但是當我嘗試將它添加到模式中時，列表出現在模式後面，而不在前面。

我已經試過，沒有運氣以下的變化：

$("#myModal").css("z-index", "1500"); 
$("tags'.$fieldname.'").css("z-index", "5000"); 

在模態：

data-backdrop="false" 

這裏是源：

<!-- 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> 

Answer 1

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

Answer 2

我有類似的問題。嘗試添加以下內容：

下面的標籤輸入字段，添加一個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> 

然後添加下面的CSS：

.ui-autocomplete { 
    position: absolute; 
} 

#container_tags { 
    display: block; 
    position:relative 
} 

這應該可以解決你的對齊問題。

Answer 3

使用引導3.1.1我發現只需添加以下CSS即可使自動完成工作。

.ui-autocomplete { 
    z-index: 5000; 
} 

ui-autocomplete類附加到內部用於構造自動完成的UL。通過給它一個瘋狂的高Z指數，你可以有效地確保將它放在頁面上的所有其他位置，包括模態對話框。

Answer 4

使用appendTo選項，而不是CSS修改： http://api.jqueryui.com/1.10/autocomplete/#option-appendTo

Answer 5

jQuery的自動完成有一個內置的CSS類用於此目的。只需將'ui-front'類添加到Bootstrap模式中的容器元素即可。

jQuery Autocomplete docs

..輸入字段的父母將被檢查的一類 UI-前的。如果發現與UI的前級的元素，菜單 將追加到該元素

Answer 6

我需要無論從glastonbridge和bsandhu的答案，使這項工作，作爲「UI-前」級只增加了一個100的Z指數。

此外，「ui前」類需要在div上，立即包裹我的輸入控件以獲得一致的結果。

我使用BS 3.3.7，jQ 3.1.1和jQUI 1.12.1。

Answer 7

什麼工作對我來說：

 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); 
    } 
    }); 

    }