W3.CSS Modal

A modal is a dialog box/popup window that is displayed on top of the current page:

W3.CSS Modal Classes

W3.CSS provides the following classes for modal windows:

Class	Defines
w3-modal	The modal container
w3-modal-content	The modal content

Create A Modal

The w3-modal class defines a container for a modal.

The w3-modal-content class defines the modal content.

Modal content can be any HTML element (divs, headings, paragraphs, images, etc.).

Example

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


<div id="id01" class="w3-modal">
<div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'"
      class="w3-button w3-display-topright">×</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
</div>
</div>

Try It Yourself »

Open a Modal

Use any HTML element to open the modal. However, this is often a button or a link.

Add the onclick attribute and point to the id of the modal (id01 in our example), using the document.getElementById() method.

Close a Modal

To close a modal, add the w3-button class to an element together with an onclick attribute that points to the id of the modal (id01). You can also close it by clicking outside of the modal (see example below).

Tip: × is the preferred HTML entity for close icons, rather than the letter "x".

Modal Header and Footer

Use w3-container classes to create different sections inside the modal content:

Example

<div id="id01" class="w3-modal">
<div class="w3-modal-content">

    <header class="w3-container w3-teal">
      <span onclick="document.getElementById('id01').style.display='none'"
      class="w3-button w3-display-topright">×</span>
      <h2>Modal Header</h2>
    </header>

    <div class="w3-container">
      <p>Some text..</p>
      <p>Some text..</p>
    </div>

    <footer class="w3-container w3-teal">
      <p>Modal Footer</p>
    </footer>

</div>
</div>

Try It Yourself »

Modal As a Card

To display the modal as a card, add one of the w3-card-* classes to the w3-modal-content container:

Example

Try It Yourself »

Animated Modals

Use any of the w3-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction:

Example

Try It Yourself »

You can also fade in the modal's background color by setting the w3-animate-opacity class on the w3-modal element:

Example

Try It Yourself »

Modal Image

Click on the image to display it as a modal, in full size:

Example

Try It Yourself »

Modal Image Gallery

Click on an image to display it in full size:

Example

<div class="w3-row-padding">
<div class="w3-container w3-third">
    <img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
    <img src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
    <img src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>

<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>

Try It Yourself »

Modal Login Form

This example creates a modal for login:

Example

Try It Yourself »

Modal With Tabbed Content

This example creates a modal with tabbed content:

Example

Try It Yourself »

Close the Modal

In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:

Example

// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Try It Yourself »