基于纯JavaScript插件创建8个模态窗口的技术实现咨询

Hey there! Let's sort out creating those 8 tingle.js modals without writing repetitive code over and over. First, let's recap the basic single-modal setup you shared:

var modalContent = new tingle.modal();
var btn = document.querySelector('.trigger-button-1');
var modalWindow = document.querySelector('.project1-modal');
btn.addEventListener('click', function () { modalContent.open(); });
modalContent.setContent(modalWindow.innerHTML);

Writing this 8 times is messy and hard to maintain. Instead, we can use a loop and consistent HTML naming conventions to handle all 8 modals in one go:

1. Standardize Your HTML Structure #

First, set up your trigger buttons and modal content containers with a consistent pattern. Use data-* attributes to link each button to its corresponding modal:

<!-- Trigger Buttons -->
<button class="modal-trigger" data-modal-id="modal-1">Open Modal 1</button>
<button class="modal-trigger" data-modal-id="modal-2">Open Modal 2</button>
<!-- ... repeat for buttons 3 through 8 ... -->

<!-- Modal Content Containers (hidden by default) -->
<div class="modal-template" id="modal-1" style="display: none;">
  <h3>Modal 1 Content</h3>
  <p>This is the content for your first modal window.</p>
</div>
<div class="modal-template" id="modal-2" style="display: none;">
  <h3>Modal 2 Content</h3>
  <p>This is the content for your second modal window.</p>
</div>
<!-- ... repeat for modals 3 through 8 ... -->

2. Batch-Create Modals with JavaScript #

This code will loop through all your trigger buttons, create a tingle modal instance for each, and wire up the click event automatically:

// Grab all trigger buttons
const modalTriggers = document.querySelectorAll('.modal-trigger');

// Process each button
modalTriggers.forEach(trigger => {
  // Get the ID of the corresponding modal content
  const modalId = trigger.getAttribute('data-modal-id');
  const modalContent = document.getElementById(modalId);
  
  // Create a new tingle modal instance (add your config options here!)
  const modal = new tingle.modal({
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: 'Close',
    cssClass: ['custom-modal-style'], // Add custom CSS classes if needed
    // Add other tingle options like footer, width, etc. here
  });
  
  // Set the modal content from the hidden template
  modal.setContent(modalContent.innerHTML);
  
  // Attach click handler to open the modal
  trigger.addEventListener('click', () => {
    modal.open();
  });
});

Why This Works Better #

• No repetitive code: You won't have to copy-paste the same modal creation logic 8 times
• Easy to update: If you want to change modal settings (like adding a footer or adjusting the close behavior), you only need to edit one place
• Scalable: Want to add a 9th modal later? Just add a new button and content container—no JS changes needed
• Clear logic: The data-modal-id attribute makes it obvious which button links to which modal

If you already started writing partial code, you can just replace those scattered modal instances with this loop-based approach to clean things up.

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