Google地图自动完成导致启动模式对话框
我在Twitter Bootstrap模式对话框中有一个Google Maps自动完成input字段，不会显示自动完成结果。 但是，如果我按向下箭头键，它会select下一个自动完成结果，所以看起来自动完成代码工作正常，只是结果显示不正确。 也许它隐藏在模式对话框后面？
以下是截图：
在自动填充字段中键入内容不会产生任何结果
按下向下箭头键给出第一个结果
和代码：
<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（inspect元素什么也没有），所以我现在迷失了方向。 任何帮助？
先谢谢了！
问题在于.modal的z-index
使用这个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：感谢@lilina在jsfiddle.com上的演示
Bootstrap的.modal z-index默认为1050。
jQuery UI的.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; }
奇迹！ 🙂
使用Bootstrap 3：
.pac-container { z-index: 1040 !important; }
一般来说，你可以将.pac-container z-index碰到任何高于1050的东西，而不需要其他的CSS覆盖。
我发现这个问题也存在于jQuery UI对话框中。 因此，如果最终对其他人有帮助，下面是Bootstrap / jQuery UI模块在z平面中的位置的快速参考：
jQuery UI Dialog - z-index: 1001 Bootstrap Modal - z-index: 1050
在我的场景中，.pac-container的z-index值将被初始化并覆盖到1000，即使我在CSS中设置。 （可能通过谷歌API？）
我肮脏的修复
$('#myModal').on('shown', function() { $(".pac-container").css("z-index", $("#myModal").css("z-index")); }
如果使用Visual Studio，则在style.css页面.modal的z-index .modal为20。
例如
.modal { z-index: 20 !important; }
这对我有效。
var pacContainerInitialized = false; $('#inputField').keypress(function() { if (!pacContainerInitialized) { $('.pac-container').css('z-index','9999'); pacContainerInitialized = true; } });
