我在Twitter Bootstrap模式对话框中有一个Google Maps AutoComplete输入字段,但没有显示AutoComplete结果.但是,如果我按向下箭头键,它会 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&amp;css(判断元素没有提供任何内容),所以我现在很困惑.有什么帮助吗?

谢谢你!

推荐答案

问题出在.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;        
}​

你也可以查看最后的演示here

ps:感谢@lilina在jsfiddle.com上的演示

Css相关问答推荐

如何提高数学输出的质量?

Angular Material:如何同时使用2个徽章

使用高图的背景大小渐变

媒体查询在生产中没有响应:React 18 应用程序

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

如何在Safari中隐藏CSS的offset-path属性?CSS支持规则不按预期工作

设置初始大小并记住分配的最后大小

更改行数时更改 CSS 网格列

Bootstrap 5 - 更改列顺序时出现问题

问题定位位置:Tailwindcss 中的绝对元素

如何给三角形添加渐变?

我怎样才能将我的按钮向上移动,因为文本是

使用 node-sass 在压缩文件末尾添加 min.css 文件扩展名

当页面大小小于VH时,Tailwind CSS如何使页脚留在底部

使用 css 网格和 nth-child 交替行

在整个 DIV 周围添加 CSS 框阴影

在 Vuejs 中拥有全局 CSS 的最佳方式

从样式设置为 % 的元素获取宽度(以像素为单位)?

如何仅在一侧设置 CSS 边框?

100% 高度减go 标题?