Latest web development tutorials
 

W3.CSS Modal


W3.CSS Modal

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

×

Modal Header

Hello World!

Go back to W3.CSS Modal to learn more!

Modal Footer Close


How To Create A Modal

Example

<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">&times;</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
  </div>
</div>
Try It Yourself »

The "w3-modal" Class

A modal can be any HTML container (like a <div>) with class="w3-modal".


The "w3-modal-content" Class

All modal content should be placed in an HTML container with class="w3-modal-content".

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


Open a Modal

Use any HTML element to open the modal. 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 and specify a unique ID that matches the "trigger" button (id01).


Closing a Modal

To close a modal, add the w3-closebtn 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).

&times; (×) is an HTML entity that is the preferred icon for close buttons, rather than the letter "x".


Modal Header & Footer

Inside the <div> with class="w3-modal-content", use w3-container classes to create different sections in the modal:

×

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-closebtn">&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>
Try It Yourself »

Modal As a Card

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

×

Modal Header

Some text..

Some text..

Modal Footer

Example

<div class="w3-modal-content w3-card-8">
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:

×

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">
Try It Yourself »

You can also fade in the modal's background color (w3-modal):

Example

<div class="w3-modal w3-animate-opacity">
Try It Yourself »

Modal Image

Click on the image to display it in full size:

NorwaygetElementById('img01').style.display='block'" style="width:30%;cursor:pointer">
×
Norway

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>
Try It Yourself »

Modal Image Gallery

Click on an image to display it in full size:

onClick(this)" class="w3-hover-opacity">
onClick(this)" class="w3-hover-opacity">
onClick(this)" class="w3-hover-opacity">
×

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>
Try It Yourself »

Modal Login Form

This example creates a modal for login:

×

Avatar
Remember me
Forgot password?

Example

Try It Yourself »

Modal Tab

This example creates a modal with tabbed content:

×

Header

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 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.


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 »