Question

我创建了一个带叠加层的弹出窗口。在弹出窗口中，我有一个文本字段，我从谷歌API获取位置。但是，位置建议正在覆盖后面。如何让它在前面可见？任何人都可以帮助吗？它看起来像

位置建议的图片：

我的代码如下。

<html>
<head>
<style>
body.no-scroll{
    overflow-y: hidden;
}

.overlay{
    position: fixed;
    left: 0;
    top: 0;
    margin: auto;
    z-index: 100000;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100vh;
    text-align: center;
}

.overlay-image{
    position: absolute;
        left: 0;
        right: 0;
        top: 50%;
    margin: auto;
    max-width: 90%;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    if(window.location.href.indexOf("&utm_source=facebook") > -1) {
        $('body').addClass('no-scroll');
        $('.overlay').show();
    }
    $(document).on('click', 'body.no-scroll', function (e) {
        $('.overlay').hide();
        $('body').removeClass('no-scroll');
    });
});
</script>
</head>
<body>
    <div class="overlay">
        <div class="overlay-image">
        <form action="" method="post">
            <input type="text" name="city" id="txtPlaces">
            <button type="submit">Search</button>
        </form>
    </div>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=xxxxxxxx"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.A;
                var longitude = place.geometry.location.F;
                var mesg = "Address: " + address;

            });
        });
    </script>
    </div>
</body>
</html>

我需要添加或更改以使位置建议在前面显示？

如何在叠加前提出下拉菜单建议？

0 个答案: