style.display = 'none' событие клика на модальных прыжках вверх страницы

Question

У меня есть модал, который отображается при клике на моей странице. Я добавил прослушиватель событий в элемент ссылки «закрыть» в правом верхнем углу модального кода, код которого выглядит следующим образом:

document.querySelector('.modal__close').addEventListener('click', () => {
            modal.style.display = 'none'
        })

Это действительно закрывает / удаляет модальное окно, однако также вызывает страница, чтобы «перепрыгнуть» обратно наверх (я заметил, что она также добавляет «#» в конец URL), что не является поведением, которое я хочу, как бы заставить модал просто изящно исчезнуть и оставить базовый дисплей точно такой же?

Answer 1

Возможно, этот элемент является ссылкой, поэтому вам следует запретить его действие по умолчанию (то есть переходить по ссылке, определенной в атрибуте href)

document.querySelector('.modal__close').addEventListener('click', (ev) => {
      modal.style.display = 'none';
      ev.preventDefault();
})

В качестве примечания можно использовать вместо этого элемент <button>, который может быть более подходящим для этого варианта использования.

Answer 2

Я думаю, что у вас есть что-то вроде этого:

<a href="" class="modal__close"></a>

По умолчанию, если для ссылки ( a ) не определен href , он перезагрузите текущую страницу (и добавьте #).

Чтобы пропустить это, вы можете сделать это, запретив действие по умолчанию в вашем Javascript с параметром :

document.querySelector('.modal__close').addEventListener('click', (ev) => {
     ev.preventDefault();
     modal.style.display = 'none';
});

и в jQuery было бы проще:

$('.modal__close').click(function(ev){
    ev.preventDefault();
    $(modal).css('display', 'none'); // can also be $(modal).hide();
});