网站成人板块18+验证弹窗开发及JavaScript淡入淡出代码找回需求

Got it, here's a clean, straightforward solution that does exactly what you need: a full-screen modal that blocks access to your adult-oriented page until the user confirms they're 18+. Clicking "Yes" fades the modal out and reveals your content, while "No" sends them back to the homepage. No external libraries required—just pure HTML, CSS, and JS.

HTML Structure #

First, set up the modal and your page content container:

<!-- Age Verification Modal -->
<div id="ageModal" class="age-modal">
  <div class="modal-content">
    <h2>Age Verification</h2>
    <p>You must be 18 years or older to access this content.</p>
    <div class="modal-buttons">
      <button id="confirmAge">Yes, I'm 18+</button>
      <button id="denyAge">No, take me back</button>
    </div>
  </div>
</div>

<!-- Your Restricted Page Content -->
<div id="pageContent" class="page-content">
  <!-- Insert your actual adult-oriented content here -->
  <h1>Adult Content Section</h1>
  <p>This content is only visible after age verification.</p>
</div>

CSS Styling #

Style the modal to cover the entire screen, make it prominent, and hide your page content by default:

/* Full-screen modal overlay */
.age-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensures modal stays on top of all other content */
}

/* Modal content box */
.modal-content {
  background-color: #fff;
  padding: 2.5rem;
  border-radius: 10px;
  text-align: center;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.modal-content h2 {
  color: #2d3748;
  margin-bottom: 1rem;
}

.modal-content p {
  color: #4a5568;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* Button container */
.modal-buttons {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
}

.modal-buttons button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#confirmAge {
  background-color: #38a169;
  color: white;
}

#confirmAge:hover {
  background-color: #2f855a;
}

#denyAge {
  background-color: #e53e3e;
  color: white;
}

#denyAge:hover {
  background-color: #c53030;
}

/* Restricted page content - hidden by default */
.page-content {
  display: none;
  padding: 3rem;
}

JavaScript Logic #

Add the functionality to handle button clicks, fade out the modal, and redirect users:

// Grab DOM elements
const ageModal = document.getElementById('ageModal');
const pageContent = document.getElementById('pageContent');
const confirmBtn = document.getElementById('confirmAge');
const denyBtn = document.getElementById('denyAge');

// Handle "Yes, I'm 18+" click
confirmBtn.addEventListener('click', () => {
  // Add fade-out transition to the modal
  ageModal.style.opacity = '0';
  ageModal.style.transition = 'opacity 0.6s ease';
  
  // Hide modal and show content after the fade completes
  setTimeout(() => {
    ageModal.style.display = 'none';
    pageContent.style.display = 'block';
  }, 600);
});

// Handle "No, take me back" click
denyBtn.addEventListener('click', () => {
  // Redirect to homepage - replace '/' with your actual homepage URL if needed
  window.location.href = '/';
});

Quick Customization Tips #

• Adjust fade speed: Change the 0.6s value in the transition to make the fade faster or slower.
• Homepage URL: Replace / in window.location.href with your actual homepage path (e.g., /home.html).
• Remember user choice: Add localStorage to save the user's verification status so they don't see the modal every visit. Just add a check on page load:

  // Check if user already verified age
  window.addEventListener('load', () => {
    if (localStorage.getItem('ageVerified') === 'true') {
      ageModal.style.display = 'none';
      pageContent.style.display = 'block';
    }
  });
  
  // Update localStorage when user confirms
  confirmBtn.addEventListener('click', () => {
    localStorage.setItem('ageVerified', 'true');
    // ... rest of the existing code
  });
  

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