W3.CSS Modal

Toggle navigation
TUTORIAL HOME
W3.CSS Modal
❮ Previous Next ❯
A modal is a dialog box/popup window that is displayed on top of the current page:

Open Modal
×
Modal Header
Hello World!

Go back to W3.CSS Modal to learn more!

Modal Footer Close

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
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>

<!-- The Modal -->
<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">&times;</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
  </div>
</div>
»
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: &times; 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:

Open Modal with Containers
×
Modal Header
Some text..

Some text..

Modal Footer

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">&times;</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>
»
Modal As a Card
To display the modal as a card, add one of the w3-card-* classes to the w3-modal-content container:

Open Modal as a Card
×
Modal Header
Some text..

Some text..

Modal Footer

Example
<div class="w3-modal-content w3-card-4">
»
Animated Modals
Use any of the w3-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction:

Zoom In Top Bottom Left Right Fade In
×
Modal Header
Some text..

Some text..

Modal Footer

×
Modal Header
Some text..

Some text..

Modal Footer

×
Modal Header
Some text..

Some text..

Modal Footer

×
Modal Header
Some text..

Some text..

Modal Footer

×
Modal Header
Some text..

Some text..

Modal Footer

×
Modal Header
Some text..

Some text..

Modal Footer

×
Modal Header
Some text..

Some text..

Modal Footer

Example
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
»
You can also fade in the modal's background color by setting the w3-animate-opacity class on the w3-modal element:

Fade in Modal
Example
<div class="w3-modal w3-animate-opacity">
»
Modal Image
Click on the image to display it as a modal, in full size:

×
Example
<img src="img_fjords.jpg" onclick="document.getElementById('modal01').style.display='block'" class="w3-hover-opacity">

<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
  <img class="w3-modal-content" src="img_fjords.jpg">
</div>
»
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_fjords.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>
»
Modal Login Form
This example creates a modal for login:


×
Username
Enter Username
Password
Enter Password
Login Remember me
Cancel Forgot password?
Example
Open Login Modal
»
Modal With Tabbed Content
This example creates a modal with tabbed content:

×
Header
London Paris Tokyo
London
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paris
Paris is the capital of France.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tokyo
Tokyo is the capital of Japan.


Close
Example
Open Tabbed Modal
»
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";
  }
}
»
Advanced: Lightbox (Modal Image Gallery)
This example shows how to add an image slideshow inside a modal, to create a "lightbox":

×
❮ ❯

Example
Click on an image:
»
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.


❮ Previous Next ❯