W3.CSS Modal
W3.CSS Modal
A modal is a dialog box/popup window that is displayed on top of the current page:
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">×</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).
 |
× (×) 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:
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">×</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:
Animated Modals
Use any of the w3-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction:
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">
Try It Yourself »
Modal Image
Click on the image to display it 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>
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_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="m01" 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("m01").style.display = "block";
}
</script>
Try It Yourself »
Modal Login Form
This example creates a modal for login:
Modal Tab
This example creates a modal with tabbed content:
