谷歌地图自动完成列表显示在 AJAX ModalPopup - ASPX 后面

Posted 2023-05-08

【中文标题】谷歌地图自动完成列表显示在 AJAX ModalPopup - ASPX 后面

【英文标题】：Google Maps Autocomplete List Showing Behind AJAX ModalPopup - ASPX

【发布时间】：2018-01-29 22:53:04

【问题描述】：

我有以下从textbox 读取字符串的 JQuery 代码。该字符串应该填充地址或街道名称等，以便在 Google 地图中找到。

    $(function () 
    $("#txEnterStreet").geocomplete(
        map: ".map_canvas",
        details: "fieldset",
        markerOptions: 
            draggable: true
        
    );

    $("#txEnterStreet").bind("geocode:dragged", function (event, latLng) 
        $("input[name=lat]").val(latLng.lat());
        $("input[name=lng]").val(latLng.lng());
        $("#reset").show();
    );

    $("#btnFind").click(function () 
        $("#txEnterStreet").trigger("geocode");
    ).click();
);

我发现的问题是自动完成列表没有显示在 AJAX 模态弹出窗口的前面，而是在它的下面，如图所示。我找不到让它显示在前面的方法。我没有 CSS 类来修改 textbox。我正在使用此处提供的 JQuery.Geocomplete.JS 插件：jQuery Geocoding and Places Autocomplete Plugin

【参考方案1】：

经过大量研究，终于找到了解决方案。对于包含代码的 CSS，我将其修改为：

    .modalBackground6 
    background-color: Black;
    filter: alpha(opacity=70);
    opacity: 0.7;
    /*z-index: 9999 !important;*/
    z-index: 1 !important;


/*for the panel*/
.modalPopup6 
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: Black;
    border-radius: 1px;
    padding-top: 5px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 1px;
    width: 950px;
    height: 720px;

    /*z-index: 9999 !important;*/
    z-index: !important;

我在这个网站上找到了解决方案：specify z-index。我没有更改 jQuery 中的任何内容。 CSS 现在将 z-index 修改为：

            <ajax:ModalPopupExtender ID="ModalPopupGoogleMaps" runat="server" PopupControlID="pnlGoogleMaps" DropShadow="false" TargetControlID="lnkFake"
            CancelControlID="btnCloseMap" BackgroundCssClass="modalBackground6" BehaviorID="ModalPopupGoogleMaps">
        </ajax:ModalPopupExtender>

        <asp:Panel ID="pnlGoogleMaps" CssClass="modalPopup6" runat="server" Style="top: 6% !important; display:none;"> 

显示其工作原理的图片：