Modal close by click on a link

Web Development
1

Hi everyone,

I have a question regarding the modal. I’m working on a one-pager and my plan is to have a full screen modal as main menu initiated by an icon. Inside I want to place a list group and all list items are my menu content. The links should reference to a corresponding anchor on the page.

So much for my idea. The problem seems to be that if I click on one of the links, the modal is not closing. That’s a bit “irritating”. Since I’m not a coder I was brave enough to ask AI for help :laughing: and got something like this back (Java Script):

<script>
  // Get the modal, menu links, and close button elements
  var modal = document.getElementById('myModal');
  var menuLinks = document.querySelectorAll('.menu-link');
  var closeButton = modal.querySelector('.close');

  // Function to close modal and remove overlay
  function closeModal() {
    modal.style.display = 'none';
    document.body.classList.remove('modal-open');
    
    // Remove the modal-backdrop element
    var backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) {
      backdrop.parentNode.removeChild(backdrop);
    }
  }

  // Attach click event to menu links
  menuLinks.forEach(function(link) {
    link.addEventListener('click', closeModal);
  });

  // Attach click event to close button
  closeButton.addEventListener('click', closeModal);

  // Attach click event to modal overlay
  window.addEventListener('click', function(event) {
    if (event.target === modal) {
      closeModal();
    }
  });
</script>

I took out the parts of which I thought that could help me and so I only used this:

  // Get the modal, menu links, and close button elements
  var modal = document.getElementById('mainMenu');
  var menuLinks = document.querySelectorAll('.list-group-item');

  // Function to close modal and remove overlay
  function closeModal() {
    modal.style.display = 'none';
    document.body.classList.remove('modal-open');
    
    // Remove the modal-backdrop element
    var backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) {
      backdrop.parentNode.removeChild(backdrop);
    }
  }

  // Attach click event to menu links
  menuLinks.forEach(function(link) {
    link.addEventListener('click', closeModal);
  });

Maybe selecting some things wasn’t the best approach… The result is that the modal seems to go away but not completely so I’m stuck a little.
Been watching on this the whole day – maybe there is a simple solution to it but I don’t see it… Any help is very appreciated.

I attached the test file to this post.
231117 test.rwc.zip (454.5 KB)

Cheers and happy weekend to all
Ralf

2

Hi
Do you have a link to a site that you’ve seen that uses an overlay menu with anchor links? I have only seen anchors on a page with a sticky menu.

3

Hi @stackJunkie,

thanks for your answer but unfortunately no. Haven’t seen something like this. Right now the way I described above is what I did so far. If there is an easier way with keeping the modal as a full screen overlay, than I’m really happy to get more input or hints. :upside_down_face:

Cheers
Ralf

4

Hmm, unfortunately I don’t think you can use a modal with anchor linking within the page. I could be wrong, maybe someone with backend knowledge can chime in. The modal by nature is just a temporary overlay that floats on top of a page if you use anchors it will take you to the section on the page but wont close the overlay.

5

Agreed… That’s why I was wondering if there might be a solution for this using a short JavaScript function. But I’m not able to solve this since I’m not into coding.
As an alternative, it may be possible the whole link including the anchor, e.g. https://www.blabla.com/#anchor
But this would be more like a workaround. If it isn’t possible, so be it. I just wanted to ask for some solution with a modal.

Keep smiling
Ralf