如何在同一页面为现有Modal脚本添加第二个Modal？

Hey there! The problem with your current script is that it's hardcoded to work only with your single glemsom modal. To support multiple modals on the same page, we need to refactor the code to be reusable and not tied to specific IDs. Here's a clean, scalable solution:

Step 1: Update Your HTML #

First, add your second modal and update the trigger buttons to use a custom data-modal-target attribute. This attribute will link each button directly to its corresponding modal:

<!-- Trigger Buttons -->
<button id="glemtkoden" data-modal-target="#glemsom">Open Forgot Code Modal</button>
<button id="second-modal-btn" data-modal-target="#second-modal">Open Second Modal</button>

<!-- First Modal (your existing one) -->
<div id="glemsom" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Glemt koden?</h2>
    </div>
    <div class="modal-body">
      <p>Modal no 1</p>
    </div>
  </div>
</div>

<!-- Second Modal -->
<div id="second-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Second Modal Title</h2>
    </div>
    <div class="modal-body">
      <p>This is the content of your second modal!</p>
    </div>
  </div>
</div>

Step 2: Refactor Your JavaScript #

Replace your existing script with this reusable version. It works for any number of modals without needing to write new code each time:

<script>
// Get all modal trigger buttons and close buttons
const modalTriggers = document.querySelectorAll('[data-modal-target]');
const closeButtons = document.querySelectorAll('.close');

// Helper function to open a modal
function openModal(modalElement) {
  if (!modalElement) return;
  modalElement.style.display = 'block';
}

// Helper function to close a modal
function closeModal(modalElement) {
  if (!modalElement) return;
  modalElement.style.display = 'none';
}

// Attach click events to trigger buttons
modalTriggers.forEach(button => {
  button.addEventListener('click', () => {
    const targetModal = document.querySelector(button.dataset.modalTarget);
    openModal(targetModal);
  });
});

// Attach click events to close buttons
closeButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Find the closest parent modal element
    const parentModal = button.closest('.modal');
    closeModal(parentModal);
  });
});

// Close modal when clicking outside the content area
window.addEventListener('click', (event) => {
  if (event.target.classList.contains('modal')) {
    closeModal(event.target);
  }
});
</script>

Why This Works: #

• data-modal-target Attribute: Creates a clear link between each button and its modal, making it easy to add more modals later (just add a new button with the attribute pointing to your new modal's ID).
• Reusable Functions: openModal and closeModal handle the display logic for any modal element, avoiding duplicate code.
• Dynamic Element Targeting: Instead of hardcoding IDs, we use closest('.modal') to find the parent modal of each close button, and check the modal class for outside clicks—this works for every modal on the page.

Now you can add as many modals as you want by following the same pattern: create a modal with a unique ID, add a trigger button with data-modal-target="#your-modal-id", and the script will handle the rest!

内容的提问来源于stack exchange，提问作者Henrik C Wiberg