宣传单张：更改弹出窗口的行为，以便如果弹出窗口处于打开状态，则单击外部弹出窗口将仅关闭弹出窗口（不基于单击位置打开新的弹出窗口）？

Question

最终编辑

我对这种体验的想法是针对以移动应用为目标的网络应用。在移动设备上，用户通常希望轻按一下即可关闭该项目。最相似的标准Web体验是在模型外部（在半透明的覆盖层上）单击以消除模式（某种隐式的Escape键）。这种方法在我的地图上会很好用，因为这样我就可以隐藏弹出窗口的关闭按钮，而用户可能会尝试单击弹出窗口本身，或者单击它，然后都将关闭弹出窗口。

例如，请参阅我的项目的以下视频：YouTube

默认情况下，单击底图时将关闭弹出窗口。但是，当放大操场并单击标记时，地图的整个可见区域都具有活动的多边形叠加层，因此单击弹出窗口之外的位置会触发新的弹出窗口。对于移动体验，我认为最好具有 just 选项，以关闭打开的弹出窗口（就像您单击底图一样），并需要再次轻按以打开一个新窗口。

解决方案

我的解决方案是将所有弹出窗口移动到z索引为700的窗格，然后在z 699创建另一个窗格以进行透明覆盖。然后，我使用popupopen和popupclose事件在z699处从地图中添加和移除了一个透明多边形，这有效地阻止了对下方任何图层的点击，直到用户关闭了当前弹出窗口。

map.getPane('popupPane').style.zIndex = 700;
map.createPane('hiddenOverlay').style.zIndex = 699;

let hiddenData = [{
    "type": "Feature",
    "properties": {
        "name": "overlay",
        "popupContent": "test"
        },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-121.728602, 37.691681],
            [-121.724186, 37.691543],
            [-121.723973, 37.689516],
            [-121.728260, 37.689467]]]
     }
}];

let transparentStyle = {
    color: "#ff0b00",
    weight: 5,
    fillOpacity: 0,
    opacity: 0
};

let hiddenLayer = L.geoJSON(hiddenData, {
    pane: 'hiddenOverlay',
    style: transparentStyle
});


map.on('popupopen', function(e){
    map.addLayer(hiddenLayer);
});

map.on('popupclose', function(e){
    map.removeLayer(hiddenLayer);
});