style.display = 'none' click event on modal jumps up to top of page

Question

I have a modal that displays on a click event on my page. I've added an event listener to the 'close' link element in the top right of the modal, code as follows:

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

This does indeed close/remove the modal, however, it also causes the page to 'jump' back up to the top (I've noticed it also adds a '#' to the end of the url), which is not the behaviour I want, how would I get the modal to just gracefully disappear and leave the underlying display exactly the same?

Can you provide the code for the `.modal__close` element please? — Daniel, Feb 27 '20 at 10:59
Try this html attribute value solution. https://stackoverflow.com/a/49271220/7109092 — Muhammad Ahsan, Feb 27 '20 at 12:06

Fabrizio Calderan · Accepted Answer · 2020-02-27T11:11:06.090

3

Probably that element is a link, so you should prevent its default action (which is to follow the link defined in the href attribute)

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

As a side note, you might use instead a <button> element, that could be more appropriate for this use case.

edited Feb 27 '20 at 11:11

answered Feb 27 '20 at 10:59

Fabrizio Calderan

120,726
26
164
177

That was it, thank you! Should have thought of that, shouldn't I. – bevc Feb 27 '20 at 11:03

score 1 · Answer 2 · answered Feb 27 '20 at 11:07

I think you have something like this :

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

By default, if the link (a) doesn't have a href defined, it reload the current page (and add a #).

To skip it, you can do it by preventing the default action in your Javascript with an event parameter :

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

and in jQuery it would be easier :

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

style.display = 'none' click event on modal jumps up to top of page

2 Answers2