如何合并两段JavaScript弹窗控制代码？已尝试多种方法未成功

Hey there, I get your frustration—you absolutely don’t need separate code for every modal! Let’s break this down step by step to clean up and merge your code, plus make it work for as many modals as you want going forward.

First: Combine Your Existing Code into One Document Ready Block #

You don’t need multiple $(document).ready() functions—all your code can live inside a single one. Here’s how your original code looks merged neatly:

$(document).ready(function() {
  // Open modal when trigger is clicked
  $('#trigger').click(function() {
    $('#overlay').fadeIn(300);
  });

  // Close modal when close button is clicked
  $('#close').click(function() {
    $('#overlay').fadeOut(300);
  });

  // Close modal when clicking the overlay itself
  $('#overlay').click(function(e) {
    if (e.target == this) {
      $(this).fadeOut(300);
    }
  });
});

That’s already cleaner, but if you want to add more modals later, relying on hardcoded IDs will get messy fast. Let’s take it a step further to make the code reusable for any number of modals.

Better: Make It Work for Multiple Modals with Classes & Data Attributes #

Instead of tying code to specific IDs, use classes for shared elements and data attributes to link triggers to their corresponding modals. Here’s how to set this up:

Step 1: Update Your HTML Structure #

Use classes like modal-trigger and modal-overlay, and add a data-modal attribute to each trigger to match the unique ID of its target modal:

<!-- Trigger for Modal 1 -->
<button class="modal-trigger" data-modal="modal1">Open Modal 1</button>

<!-- Modal 1 Overlay -->
<div id="modal1" class="modal-overlay">
  <div class="modal-content">
    <button class="modal-close">Close</button>
    <!-- Your modal content here -->
  </div>
</div>

<!-- Trigger for Modal 2 -->
<button class="modal-trigger" data-modal="modal2">Open Modal 2</button>

<!-- Modal 2 Overlay -->
<div id="modal2" class="modal-overlay">
  <div class="modal-content">
    <button class="modal-close">Close</button>
    <!-- Your modal content here -->
  </div>
</div>

Step 2: Write Reusable jQuery Code #

This single block of code will handle all your modals, no matter how many you add:

$(document).ready(function() {
  // Open the corresponding modal when a trigger is clicked
  $('.modal-trigger').click(function() {
    const targetModalId = $(this).data('modal');
    $('#' + targetModalId).fadeIn(300);
  });

  // Close the parent modal when a close button is clicked
  $('.modal-close').click(function() {
    $(this).closest('.modal-overlay').fadeOut(300);
  });

  // Close modal when clicking directly on the overlay (not content)
  $('.modal-overlay').click(function(e) {
    if (e.target == this) {
      $(this).fadeOut(300);
    }
  });
});

How This Works: #

• $('.modal-trigger').click(): Listens for clicks on any trigger with that class, grabs the data-modal value to identify which modal to open.
• $('.modal-close').click(): Finds the closest parent overlay of the clicked close button and fades it out—works for any close button in any modal.
• $('.modal-overlay').click(): Checks if the click was directly on the overlay (not the inner content) and closes it to avoid accidental closures when interacting with modal content.

Now you can add as many modals as you want without writing new JavaScript—just duplicate the HTML structure and update the IDs and data-modal values!

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