web-dev-qa-db-ja.com

モーダルの下に表示されるBootstrapモーダルのjQueryUIオートコンプリート

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>
jquerytwitter-bootstrapautocompletejqmodal
17
FstaRocka

Bootstrap 3.1.1を使用しています。オートコンプリートを機能させるには、次のCSSを追加するだけで十分です。

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

Ui-autocompleteクラスは、オートコンプリートを構築するために内部で使用されるULにアタッチされます。クレイジーな高Zインデックスを与えることにより、モーダルダイアログを含むページ内の他のすべての上にレイアウトされることを効果的に保証します。

47
glastonbridge

jQueryオートコンプリートには、このためのCSSクラスが組み込まれています。 Bootstrapモーダルのコンテナー要素に 'ui-front'クラスを追加するだけです。

jQuery Autocomplete docs

..入力フィールドの親は、ui-frontのクラスについてチェックされます。 ui-frontクラスの要素が見つかった場合、メニューはその要素に追加されます

23
bsandhu

代わりにappendToオプションを使用してcss変更： http://api.jqueryui.com/1.10/autocomplete/#option-appendTo

2
Sergey

私のために働いたもの：

<input type="text" id="country"  class="form-control" onclick="data()" />

そして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);
    }
   });

   }
1
ainos
$("tags'.$fieldname.'").css("zIndex", 5000);
1
never giveup

同様の問題がありました。以下を追加してみてください：

タグの入力フィールドの下に、次のように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>

次に、次のcssを追加します。

.ui-autocomplete {
    position: absolute;
}

#container_tags {
    display: block; 
    position:relative
}

これにより、配置の問題が修正されます。

0
Tushar Maroo

「ui-front」クラスはZインデックスを100しか追加しないため、この作業を実行するには、グラストンブリッジとbsandhuの両方の回答が必要でした。

また、一貫した結果を得るために、「ui-front」クラスは、入力コントロールをすぐにラップするdivに存在する必要がありました。

BS 3.3.7、jQ 3.1.1、およびjQUI 1.12.1を使用しています。

0
Eric