model

W3.CSS Modals

W3.CSS Modals

Modals are dialog boxes or popups displayed on top of the current page. Use the w3-modal and w3-modal-content classes to create modals.

Basic Modal

<button onclick="document.getElementById('modal').style.display='block'" class="w3-button w3-light-blue">
  Open Modal
</button>

<div id="modal" class="w3-modal">
  <div class="w3-modal-content w3-card-4">
    <header class="w3-container w3-teal"> 
      <span onclick="document.getElementById('modal').style.display='none'" 
            class="w3-button w3-display-topright">×</span>
      <h2>Modal Header</h2>
    </header>
    <div class="w3-container">
      <p>This is a modal!</p>
    </div>
    <footer class="w3-container w3-teal">
      <p>Modal Footer</p>
    </footer>
  </div>
</div>