如何在多个HTML页面复用同一个确认Modal（Confirm Modal）避免重复代码？

Great question! Reusing components like this saves tons of time and keeps your code DRY (Don't Repeat Yourself). Here are three straightforward ways to implement this:

1. Server-Side Includes (SSI) – Best for Static Sites with Server Support #

If your web server (like Apache or Nginx) supports Server-Side Includes, this is the simplest approach.

First, save your confirm modal code into a separate file, say confirm-modal.html:

<div class="modal fade" id="confirm_modal" role="dialog">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="confirm-modal-title">Confirmation Message</h3>
      </div>
      <div class="modal-body">
        <strong><p id="confirm_model_body"></p></strong>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="confirm-modal-ok">Confirm</button>
      </div>
    </div>
  </div>
</div>

(I added the missing footer section to complete the modal since your code was cut off)

Then, in each HTML page where you need the modal, add this SSI directive right before the closing </body> tag:

<!--#include virtual="/path/to/confirm-modal.html" -->

Make sure your server is configured to process SSI (for Apache, enable mod_include and set Options +Includes in your .htaccess or config file; for Nginx, use the ssi on; directive).

2. JavaScript Injection – No Server Configuration Needed #

If you can't use server-side includes, you can use JavaScript to dynamically inject the modal into each page.

First, create a confirm-modal.js file with this code:

// Create the modal HTML as a string
const confirmModalHTML = `
<div class="modal fade" id="confirm_modal" role="dialog">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="confirm-modal-title">Confirmation Message</h3>
      </div>
      <div class="modal-body">
        <strong><p id="confirm_model_body"></p></strong>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="confirm-modal-ok">Confirm</button>
      </div>
    </div>
  </div>
</div>
`;

// Append the modal to the body when the page loads
document.addEventListener('DOMContentLoaded', () => {
  document.body.insertAdjacentHTML('beforeend', confirmModalHTML);
});

Then, include this script in every HTML page that needs the modal, right before the closing </body> tag:

<script src="/path/to/confirm-modal.js"></script>

You can also add functions to handle the modal's behavior (like setting custom messages or confirm actions) in the same JS file to keep all modal logic centralized.

3. Using a Template Engine – For More Complex Projects #

If you're working on a larger project, using a template engine like Handlebars, Pug, or EJS can make component reuse even smoother.

For example, with Handlebars:

• Create a partial file confirm-modal.hbs with your modal code.
• In each template file, include the partial using {{> confirm-modal }}.
• When compiling your templates, the partial will be automatically inserted into every page that references it.

Whichever method you choose, you'll only need to maintain the modal code in one place – any changes you make will apply to all pages that use it.

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