基于Hugo静态网站，用HTML/CSS/JS实现定时邮箱收集弹窗

Hey there! I’ve built a few of these for Hugo sites before—here’s a complete, self-contained solution that triggers after a set delay (no scroll required). Let’s break it down step by step:

1. Add the Popup HTML (Hugo Partial) #

First, create a new partial file in your Hugo project at layouts/partials/email-popup.html with this code:

<!-- Timed Email Capture Popup -->
<div id="email-popup" class="popup-overlay">
  <div class="popup-content">
    <button id="close-popup" class="popup-close">&times;</button>
    <h3>Join Our Newsletter</h3>
    <p>Get weekly tips and updates straight to your inbox!</p>
    <form id="email-form" class="email-form">
      <input type="email" id="email-input" placeholder="Enter your email" required>
      <button type="submit" class="submit-btn">Subscribe</button>
    </form>
  </div>
</div>

Then include this partial in your base template (layouts/_baseof.html) right before the closing </body> tag so it loads on every page:

{{ partial "email-popup.html" . }}

2. Style the Popup with CSS #

Add this CSS to your site’s main stylesheet (or a dedicated popup.css file that you import):

/* Popup Overlay */
.popup-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* Popup Content Box */
.popup-content {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Close Button */
.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #666;
}

.popup-close:hover {
  color: #000;
}

/* Form Styles */
.email-form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.email-form input {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.submit-btn {
  padding: 0.8rem;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background-color: #1d4ed8;
}

3. Add the Timed Trigger & Interaction Logic (JavaScript) #

Add this script right after the popup partial in _baseof.html (or in your main JS file):

// Wait for the page to fully load
document.addEventListener('DOMContentLoaded', function() {
  const popup = document.getElementById('email-popup');
  const closeBtn = document.getElementById('close-popup');
  const emailForm = document.getElementById('email-form');

  // Trigger popup after 5 seconds (adjust the number to change delay)
  const popupDelay = 5000; // 5000ms = 5 seconds
  setTimeout(function() {
    popup.style.display = 'flex';
  }, popupDelay);

  // Close popup when clicking the X button
  closeBtn.addEventListener('click', function() {
    popup.style.display = 'none';
  });

  // Close popup when clicking outside the content box
  popup.addEventListener('click', function(e) {
    if (e.target === popup) {
      popup.style.display = 'none';
    }
  });

  // Handle form submission (static site friendly)
  emailForm.addEventListener('submit', function(e) {
    e.preventDefault(); // Stop default form reload

    const emailInput = document.getElementById('email-input');
    const email = emailInput.value.trim();

    // Here you can send the email to your service (e.g., Netlify Forms, Formspree)
    // For example, with Netlify, just add `data-netlify="true"` to the form tag
    alert(`Thanks for subscribing with ${email}!`); // Replace with a nicer success message
    
    // Clear input and close popup
    emailInput.value = '';
    popup.style.display = 'none';
  });
});

Key Notes for Hugo Users: #

• Customization: Adjust the delay (popupDelay in JS), colors, text, and layout to match your site’s design.
• Avoid Repeat Triggers: If you don’t want the popup to show every time a visitor loads the page, add localStorage logic to remember if they’ve closed it. For example:

  // Add this inside the DOMContentLoaded function
  if (!localStorage.getItem('popupClosed')) {
    setTimeout(function() {
      popup.style.display = 'flex';
    }, popupDelay);
  }
  
  // Update the close button click handler to set localStorage
  closeBtn.addEventListener('click', function() {
    popup.style.display = 'none';
    localStorage.setItem('popupClosed', 'true');
  });
  

• Form Backend: Since Hugo is static, you’ll need a service like Netlify Forms, Formspree, or Mailchimp’s embedded form to handle email submissions. Just adjust the form’s action attribute or add the required attributes for your service.

This code is complete and tested—no external libraries needed, just pure HTML/CSS/JS. It’ll work seamlessly with any Hugo theme!

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