Не удается закрыть пользовательское всплывающее окно в фиксированной позиции - PullRequest
Новая
       19

Не удается закрыть пользовательское всплывающее окно в фиксированной позиции

1 голос
/ 24 мая 2019

Вот проблема новичков в JavaScript.Я создал собственное всплывающее окно в фиксированной позиции (листовка).После нажатия на маркер, который открывает всплывающее окно, я не могу закрыть его, нажав кнопку закрытия.Я могу щелкнуть другой маркер, но всплывающая оболочка остается открытой, показывая содержимое, прикрепленное к каждому другому маркеру.Таким образом, содержимое всплывающего окна изменяется, щелкая маркеры, но не может закрыть всплывающее окно, нажимая кнопку закрытия.
Я попробовал eventListener.Мне нужен тот кусок кода, который делает эту работу.Любая помощь будет оценена. 

// Adds custom marker

var redFlag = L.icon({
    iconUrl: 'images/mapmarker2.png',
    iconSize: [34, 34],
    iconAnchor: [17,34]
});

// Adds markers and popup
// geoJSON file stored in 'art' variable

const myLayer = L.geoJSON(art, {
    pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {icon: redFlag});

},
onEachFeature: function ( feature, layer) {
    layer.on('click', function(e){

// popup content

   var getWrap = document.getElementById('wrapper');
        var wrap = getWrap.appendChild(document.createElement('div'));
        wrap.className = 'wrapper';
        wrap.innerHTML =  
           `<div class="close">X</div>`+ 
           `<div class="popUpContent" style="background-color:#e8f4ff">`+
           `<div class='pic'><img src = 
            "images/${feature.properties.image}"></div>`+ 
           `<div class="puName"><span 
            class="puName">${feature.properties.name}</span><br>`+
           `<span class="puTitle">"${feature.properties.title}"</span><br>`+ 
           `<div class="extra3">${feature.properties.extra}</div></div>`+ 
           `</div>`;

    if(!feature.properties.title){

        wrap.innerHTML =  
            `<div class="close">X</div>`+
            `<div class="popUpContent" style="background-color:#e8f4ff">` + 
             `<div class='pic'><img src = 
             "images/${feature.properties.image}"></div>`+ 
             `<div class="puName"><span 
             class="puName">${feature.properties.name}</span><br>`+ 
             `<div class="extra3">${feature.properties.extra}</div></div>`+ 
             `</div>`;
         }

// Add eventlistener to the close button

document.querySelector('.close').addEventListener( 'click', closePopup);
      function closePopup(e){

        if(event.target.matches('.close')){
            document.querySelector(".wrapper").style.display='none'
        }else if(document.querySelector(".wrapper").style.display='block'){
            document.querySelector(".wrapper").style.display='none';
           }
         }

       });
    }

});

mymap.addLayer(myLayer)

Ответы [ 3 ]

1 голос
/ 24 мая 2019

Вы добавляете прослушиватель событий для close перед созданием всплывающего окна.Вы должны добавить этот слушатель в конце вашего layer.on('click', function(e){... в функции onEachFeature.

Чтобы убедиться, что слушатель добавил только один, используйте removeEventListener перед добавлением события.

0 голосов
/ 28 мая 2019

Я нашел ответ. Это то, как вы создаете свой динамически сгенерированный элемент DOM, который в этом случае всплывающее окно. Создайте один пустой div с id = "popup" в div с id = "mapid" в вашем HTML-файле. Остальное генерируется динамически. Если утверждение EventListener нужен только тот блок кода, который необходим, когда условие истинно. 

const element = document.getElementById('popup');

      element.innerHTML =
            `<div class= "wrapper" style="background-color:#fff">`+
            `<div class="close">X</div>`+ 
            `<div class="popUpContent" style="background-color:#e8f4ff">` +
            `<div class='pic'><img src = "images/${feature.properties.image}"></div> 
             <p>`+ 
            `<div class="puName"><span class="puName">${feature.properties.name} 
              </span><br>`+
            `<span class="puTitle">"${feature.properties.title}"</span><br><p>` + 
            `<div class="extra3">${feature.properties.extra}</div></div>`+ 
            `</div></div>`;

  // the eventListener

            document.getElementById('popup').addEventListener( 'click', closePopup);
                    function closePopup(e){
                if(document.querySelector('.wrapper').style.display = 'block'){
                   document.querySelector('.wrapper').style.display='none';
                }
             }
0 голосов
/ 24 мая 2019

Слушатель событий не работает, поскольку всплывающее окно создается динамически. Смотрите Присоединение события к динамическим элементам в JavaScript

В качестве альтернативы, я всегда включаю всплывающее окно в HTML. Но установите свойство отображения CSS на display: none. Когда вам нужно показать всплывающее окно например, дисплей block.

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

...