Question

我有以下JQuery代码从textbox读取字符串。该字符串应填充地址或街道名称等，以便在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 Modalpopup前面，而是在它下面，正如你在图像中看到的那样。我无法找到让它显示在前面的方法。我没有CSS类来修改textbox。我正在使用此处提供的JQuery.Geocomplete.JS插件：jQuery Geocoding and Places Autocomplete Plugin

Answer 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;">

图片展示了它的工作原理：

显示AJAX ModalPopup背后的Google地图自动填充列表 - ASPX

1 个答案: