如何创建多按钮对应不同弹窗内容及从外部HTML加载弹窗内容？

Hey Alex, great question! Let's break down how to fix both of your issues with your existing modal code.

1. Create Multiple Buttons for Different Modal Content #

The key here is to link each button to a specific modal container using custom data attributes, so we can target exactly which modal to show/hide when a button is clicked. Here's how to modify your code:

Step 1: Update the HTML #

Add unique modals and modify buttons to reference them with data-target:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js "></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/semantic.min.css">
<style>
* { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; }
.intro { height: 100%; width: 100%; }
.intro .content { position: absolute; top: 50%; left: 50%; width: 80%; margin: -6em -40% 0; display: block; text-align: center; }
.intro .content h1 { font-size: 3em; margin: 0; color: #FFF; }
.intro .content h2 { font-size: 2em; font-weight: 100; margin: 0 0 2em; color: rgba(255, 255, 255, 0.5); }
.overlay { opacity: 0; visibility: hidden; position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); z-index: 100; -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); }
.overlay.active { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.overlay h1 { color: white; font-weight: bold; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.smaller { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }
#myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

<!-- Modal 1 -->
<div class="overlay" id="modal1">
<h1>This is the first overlay content.</h1>
</div>

<!-- Modal 2 -->
<div class="overlay" id="modal2">
<h1>This is the second overlay content—totally different!</h1>
<p style="color: white; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%);">Extra text for the second modal!</p>
</div>

<div class="intro">
<div class="content">
<h1>Standard message about awesome thing</h1>
<!-- Button linked to modal1 -->
<a class="ui big inverted blue button" href="#" data-target="#modal1">FIND OUT MORE (Modal 1)</a>
<!-- Button linked to modal2 -->
<a class="ui big inverted blue button" href="#" data-target="#modal2">FIND OUT MORE (Modal 2)</a>
</div>
</div>

Step 2: Update the JavaScript #

Modify the click handler to target the specific modal from the button's data-target attribute, and also handle closing modals when clicking the overlay itself:

$('.button').on('click', function(e) {
  e.preventDefault();
  // Get the target modal ID from the button
  const targetModal = $(this).data('target');
  // Hide any open modals first
  $('.overlay.active').removeClass('active');
  // Show the target modal
  $(targetModal).toggleClass('active');
  $('.content').toggleClass('smaller');
});

// Close modal when clicking the overlay
$('.overlay').on('click', function() {
  $(this).removeClass('active');
  $('.content').removeClass('smaller');
});

How it works: #

• Each button has a data-target attribute that matches the ID of the modal it should trigger.
• When a button is clicked, we first close any open modals, then toggle the active state of the target modal.
• Clicking the overlay itself closes that modal and reverts the content scaling.

2. Load Modal Content from Separate HTML Files #

Yes, you can absolutely load modal content from external HTML files using jQuery's load() method. Here's how to implement this:

Step 1: Create External HTML Files #

Make two new files in the same directory as your main HTML:

• modal1-content.html:

<h1>This content is loaded from modal1-content.html!</h1>
<p style="color: white; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%);">External content for modal 1</p>

• modal2-content.html:

<h1>Modal 2 content from a separate file!</h1>
<ul style="color: white; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%);">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Step 2: Modify the JavaScript #

Update the button click handler to load the external content into the target modal before showing it:

$('.button').on('click', function(e) {
  e.preventDefault();
  const targetModal = $(this).data('target');
  const contentFile = $(this).data('content'); // New data attribute for the file path

  // Hide open modals first
  $('.overlay.active').removeClass('active');
  
  // Load content from external file into the modal
  $(targetModal).load(contentFile, function() {
    // After content loads, show the modal
    $(targetModal).addClass('active');
    $('.content').addClass('smaller');
  });
});

$('.overlay').on('click', function() {
  $(this).removeClass('active');
  $('.content').removeClass('smaller');
});

Step 3: Update Buttons to Include data-content #

Modify your buttons to specify which external file to load:

<a class="ui big inverted blue button" href="#" data-target="#modal1" data-content="modal1-content.html">LOAD MODAL 1 (EXTERNAL)</a>
<a class="ui big inverted blue button" href="#" data-target="#modal2" data-content="modal2-content.html">LOAD MODAL 2 (EXTERNAL)</a>

Notes: #

• Make sure your external HTML files only contain the content you want inside the modal (no full html, head, or body tags).
• This works best when running on a web server (local or remote) due to browser security restrictions on loading local files via AJAX. If you're testing locally, use a simple server like python -m http.server (Python) or npx serve (Node.js).

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