Introduction to CSS

Modals are used to display content in a pop-up window. With W3.CSS, you can easily create modals with the w3-modal and w3-modal-content classes.

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

<div id="myModal" class="w3-modal">
  <div class="w3-modal-content w3-animate-opacity w3-card">
    <span onclick="document.getElementById('myModal').style.display='none'"
          class="w3-button w3-display-topright">&times;</span>
    <h3>This is a modal</h3>
    <p>Modal content goes here.</p>
  </div>
</div>

modals

W3.CSS Modals

Basic Modal