77

Twitter Bootstrapモーダルダイアログ内にGoogleマップのオートコンプリート入力フィールドがあり、オートコンプリートの結果が表示されません。ただし、下矢印キーを押すと、次のオートコンプリート結果が選択されるため、オートコンプリートコードは正しく機能しているように見えますが、結果は正しく表示されません。多分それはモーダルダイアログの後ろに隠されていますか？

これがスクリーンショットです：

オートコンプリートフィールドに何かを入力しても何も表示されません オートコンプリートフィールドに何かを入力しても何も表示されません

下矢印キーを押すと、最初の結果が得られます 下矢印キーを押すと、最初の結果が得られます

そしてコード：

<div class="modal hide fade" id="map_modal">
<div class="modal-body">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <div class="control-group">
        <label class="control-label" for="keyword">Cari alamat :</label>
        <div class="controls">
            <input type="text" class="span6" name="keyword" id="keyword">
        </div>
    </div>
    <div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>


<script type="text/javascript">
$("#map_modal").modal({
    show: false
}).on("shown", function()
{
    var map_options = {
        center: new google.maps.LatLng(-6.21, 106.84),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-6, 106.6),
        new google.maps.LatLng(-6.3, 107)
    );

    var input = document.getElementById("keyword");
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo("bounds", map);

    var marker = new google.maps.Marker({map: map});

    google.maps.event.addListener(autocomplete, "place_changed", function()
    {
        var place = autocomplete.getPlace();

        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
        }

        marker.setPosition(place.geometry.location);
    });

    google.maps.event.addListener(map, "click", function(event)
    {
        marker.setPosition(event.latLng);
    });
});
</script>

私は自分でこれを解決するために最善を尽くしましたが、オートコンプリート結果のhtml＆cssがわからないため（要素の検査では何も得られません）、今は迷っています。何か助けはありますか？

前に感謝します！

4

9 に答える 9

125

問題はz-indexの.modal

このCSSマークアップを使用します。

.pac-container {
    background-color: #FFF;
    z-index: 20;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 20;   
}
.modal-backdrop{
    z-index: 10;        
}​

また、ここで最終デモを確認できます

ps： jsfiddle.comでのデモを@lilinaに感謝します

于 2012-06-09T05:15:57.473 に答える
66 
.pac-container {
    z-index: 1051 !important;
}

私のためにそれをしました

https://github.com/twbs/bootstrap/issues/4160

于 2014-10-05T16:20:15.357 に答える
15

ブートストラップ.modal z-indexはデフォルトで1050です。

jQueryUI.ui-autocomplete z-indexはデフォルトで3です。

したがって、これをCSSに配置します。

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.ui-autocomplete {
    z-index: 1051 !important;
}

作品は不思議です！:)

于 2012-10-08T09:24:04.317 に答える
12

Bootstrap 3で動作しました：

.pac-container {
  z-index: 1040 !important;
}
于 2013-09-04T19:03:29.137 に答える
6

私のシナリオでは、CSSで設定した場合でも、.pac-containerのz-index値は初期化されて1000にオーバーライドされます。（おそらくグーグルAPIによって？）

私の汚い修正

$('#myModal').on('shown', function() {
     $(".pac-container").css("z-index", $("#myModal").css("z-index"));
}
于 2013-03-31T10:58:11.180 に答える
5

私はグーグルプレイスAPIドロップダウンzインデックスでエラーを掘り起こすのに2.3時間を費やしました。ついに私はこれを見つけました。このコードをJSスクリプトの先頭に貼り付けて、入力ID名を更新するだけです。

var pacContainerInitialized = false;
$("#inputField").keypress(function() {
  if (!pacContainerInitialized) {
    $(".pac-container").css("z-index", "9999");
    pacContainerInitialized = true;
  }
});

完全なリファレンスリンク。 https://groups.google.com/forum/#!topic/google-maps-js-api-v3/GZX0ynQNn1MGautam に感謝します。

于 2019-07-26T18:06:10.047 に答える
4

一般に、.pac-container z-indexを1050を超える値に上げるだけで、他のCSSオーバーライドは必要ありません。

この問題はjQueryUIダイアログにも存在することを発見しました。したがって、他の人の役に立つことになった場合に備えて、Bootstrap /jQueryUIモーダルがz平面のどこにあるかについてのクイックリファレンスを次に示します。

jQuery UI Dialog - z-index: 1001
Bootstrap Modal - z-index: 1050
于 2012-08-21T08:56:21.640 に答える
2

これは私のために働いた。

                   var pacContainerInitialized = false; 
                    $('#inputField').keypress(function() { 
                            if (!pacContainerInitialized) { 
                                    $('.pac-container').css('z-index','9999'); 
                                    pacContainerInitialized = true; 
                            } 
                    });
于 2017-02-10T14:38:16.977 に答える
0

Visual Studioを使用している場合は、style.cssページでz-indexfor.modalを20に設定します。

例えば

.modal {
    z-index: 20 !important;
}
于 2016-03-09T09:20:43.800 に答える