当我点击打开另一个弹出窗口时,如何强制关闭弹出窗口

How to force popup to close when I click to open an other one?

本文关键字:窗口 何强制 另一个      更新时间:2023-09-26

我创建了一个简单的映射;http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine

如果我开了一家Gîte和一家酒店,弹出窗口会一直打开。如果我打开第二个Gîte弹出窗口,第一个会自动关闭。

我希望所有弹出窗口都有这种行为。如果我点击一个项目,另一个弹出窗口会自行关闭。

我该怎么做?

配置变量:

var googlemap_setting = {
 "gite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=gite",
 "hotel": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=hotel",
 "chambre": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=chambre-hote",
 "camping": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=camping",
 "insolite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=insolite"
}

加载地图的javascript:

$(document).ready(function() {
function initGoogleMaps() {
    if ($('#map_canvas').length==0) {
        return;
    }
    var myOptions = {
        center : new google.maps.LatLng(47.26804151097223,
                -0.08375246917164172),
        zoom : 9,
        mapTypeId : google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document
            .getElementById("map_canvas"), myOptions);
    var controlDiv = document.createElement('div');
    controlDiv.style.padding = '5px';
    // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Filtrer';
    controlDiv.appendChild(controlUI);
    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = $('#mapscontrol').html();
    $('#mapscontrol').remove();
    controlUI.appendChild(controlText);
    var camping = new google.maps.KmlLayer(
            googlemap_setting["camping"]);
    var gite = new google.maps.KmlLayer(
            googlemap_setting["gite"]);
    var chambre = new google.maps.KmlLayer(
            googlemap_setting["chambre"]);
    var hotel = new google.maps.KmlLayer(
            googlemap_setting["hotel"]);
    var insolite = new google.maps.KmlLayer(
            googlemap_setting["insolite"]);
    camping.setMap(map);
    gite.setMap(map);
    chambre.setMap(map);
    hotel.setMap(map);
    insolite.setMap(map);
    google.maps.event.addDomListener(controlDiv, 'click',
            function(event) {
                var item = event.srcElement;
                if (item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(map);
                    }
                    if (item.value == "gite") {
                        gite.setMap(map);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(map);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(map);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(map);
                    }
                }
                if (!item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(null);
                    }
                    if (item.value == "gite") {
                        gite.setMap(null);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(null);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(null);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(null);
                    }
                }
            });
    map.controls[google.maps.ControlPosition.TOP_RIGHT]
            .push(controlDiv);
}
function initDataTable(){
    datatableconfig = {
            "iDisplayLength" : 20,
            "aaSorting": [[2, "asc"]],
            "oLanguage": {"sUrl": "@@collective.js.datatables.translation"},
            "aLengthMenu" : [ [ 20, 30, 50, -1 ],
                    [ 20, 30, 50, "Tous" ] ]
        };
    var oTable = $('#table-hebergement').dataTable(
            datatableconfig);
    /* ADD COLUMN SEARCH SUPPORT */
    $('#table-hebergement #head-type select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 0);
            });
    $('#table-hebergement #head-capacity select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 1);
            });
}
initGoogleMaps();
initDataTable();
});

如果不查看代码,很难提出一些建议,但我只会在弹出窗口的最外层元素中添加一个类,比如.popup,然后在打开一个之前关闭所有.popup元素。在jQuery中说:

$(".popup").hide();