Vanilla JS模态框问题：解决URL哈希直接打开后无法通过X图标或点击外部关闭的需求

Hey there! I see you've got the hash-based modal opening working, let's get those close actions sorted out. First, a quick heads-up: you have duplicate id="faqs" on both the section and the modal-content element—IDs need to be unique in HTML, so I'll adjust that in the code example below to avoid unexpected behavior.

Here's the updated code that adds both the close button and outside-click close functionality:

Updated HTML #

<section id="faqs">
  <div class="section-content">
    <div class="container">
      <div class="modal" id="modal-faqs">
        <!-- Renamed id to fix duplicate issue -->
        <div class="modal-content" id="modal-faqs-content">
          <span class="modal-close">&times;</span>
          <div class="container">
            <div id="centered-txt">
              <h1>Title</h1>
            </div>
            <div class="so-accordion-wrapper">
              Content
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Updated JavaScript #

document.addEventListener("DOMContentLoaded", function() {
  const modal = document.getElementById('modal-faqs');
  const closeBtn = document.querySelector('.modal-close');

  // Reusable function to close the modal
  function closeModal() {
    modal.style.display = 'none';
    // Optional: Clean up the URL hash for a smoother experience
    window.history.pushState('', document.title, window.location.pathname + window.location.search);
  }

  // Open modal automatically if the URL hash matches
  if (window.location.hash === '#modal-faqs') {
    modal.style.display = 'block';
  }

  // Close when clicking the "X" button
  closeBtn.addEventListener('click', closeModal);

  // Close when clicking outside the modal content area
  modal.addEventListener('click', function(e) {
    // Only trigger the close if the click is on the modal background (not inner content)
    if (e.target === modal) {
      closeModal();
    }
  });
});

Breakdown of the fixes: #

• Close Button Handling: We select the .modal-close span and attach a click event listener that runs our closeModal function, hiding the modal immediately.
• Outside Click Handling: We listen for clicks on the modal container itself. By checking if the click target is exactly the modal element (not its inner content), we ensure clicking inside the modal doesn't accidentally close it—only the background area triggers the close.
• Optional Hash Cleanup: The pushState line removes the #modal-faqs hash from the URL when closing, so if the user refreshes or navigates back, they won't see the modal pop up again unexpectedly.

Let me know if you hit any snags with this!

内容的提问来源于stack exchange，提问作者Lili