Modals, Dialogs & Visibility Toggles

w3-modal, w3-modal-content, w3-animate-top, and toggling w3-show

« Forms, Inputs, Checkboxes & Floating Labels« Previous W3.CSS Summary & Certification Exam »Next »

W3.CSS includes a full-screen backdrop modal dialog system (w3-modal) that requires just 1 line of JavaScript to toggle display.

Modal Architecture

w3-modal: The darkened full-screen backdrop overlay (display: none by default).

w3-modal-content: The centered content card containing header, body, and action buttons.

w3-animate-top or w3-animate-zoom: Adds smooth entrance animations.

Opening is done via document.getElementById("modalId").style.display = "block"; closing via "none".

Interactive Modal Dialog with Animation

Try It Yourself »

<!-- Trigger Button -->
<button onclick="document.getElementById('promoModal').style.display='block'" class="w3-button w3-teal">
  View Special Offer
</button>

<!-- Modal Container -->
<div id="promoModal" class="w3-modal">
  <div class="w3-modal-content w3-animate-top w3-card-4">
    <header class="w3-container w3-teal"> 
      <span onclick="document.getElementById('promoModal').style.display='none'" 
            class="w3-button w3-display-topright">&times;</span>
      <h2>Special Scholarship</h2>
    </header>
    <div class="w3-container w3-padding-16">
      <p>Enroll today and get 100% free verified certificate credentials.</p>
    </div>
  </div>
</div>

A complete modal with backdrop, close button, and top entrance animation.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which class provides the full-screen backdrop overlay for modal dialogs in W3.CSS?

« Previous: Forms, Inputs, Checkboxes & Floating Labels Next: W3.CSS Summary & Certification Exam »