Брошюра: Измените поведение всплывающих окон, чтобы, если всплывающее окно открыто, всплывающее окно с внешним щелчком закрывало только всплывающее окно (не открывать новое всплывающее окно в зависимости от местоположения щелчка)?

Question

Окончательное редактирование

Я подумал об этом веб-приложении, ориентированном на мобильное использование. На мобильных устройствах пользователи часто ожидают, что касание отклонит элемент. Наиболее похожим стандартным веб-интерфейсом будет нажатие за пределы модели (на полупрозрачном наложении), чтобы отклонить модал (своего рода неявный Escape-ключ). Этот подход будет хорошо работать на моей карте, потому что тогда я могу скрыть кнопку закрытия всплывающего окна, и пользователь, вероятно, попытается либо щелкнуть само всплывающее окно, либо щелкнуть по нему, и оба закроют всплывающее окно.

Например, посмотрите это видео моего проекта: YouTube

По умолчанию всплывающие окна закрываются при нажатии на базовую карту. Но при увеличении игровой площадки и щелчке маркера вся видимая область карты имеет активное наложение полигонов, поэтому при щелчке по всплывающему окну появляется новое всплывающее окно. Для мобильного опыта, я думаю, что было бы лучше иметь опции просто , чтобы закрыть открытое всплывающее окно (как если бы вы нажимали на базовую карту), и потребовать еще одно нажатие, чтобы открыть новое.

Решение

Мое решение состояло в том, чтобы переместить все всплывающие окна на панель с 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);
});