HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A modal is a dialog box/popup window that is displayed on top of the current page
W3.CSS provides the following classes for modal windows:
Class | Defines |
---|---|
w3-modal | The modal container |
w3-modal-content | The modal content |
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.).
<!-- 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">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
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.
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".
Use w3-container classes to create different sections inside the modal content:
Open Modal with Containers
<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>
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
<div class="w3-modal-content w3-card-4">
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
<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
<div class="w3-modal w3-animate-opacity">
Click on the image to display it as a modal, in full size:
<img src="img_snowtops.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_snowtops.jpg">
</div>
Click on an image to display it in full size:
<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>
function onClick(element) { document.getElementById("img02").src = element.src; document.getElementById('modal01').style.display='block'; }
This example creates a modal for login:
This example creates a modal with tabbed content:
document.getElementsByClassName("tablinkmod")[0].click(); function openCity(evt, cityName) { var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinkmod"); for (i = 0; i < x.length; i++) { tablinks[i].classList.remove("w3-light-grey"); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.classList.add("w3-light-grey"); }
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:
// 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";
}
}
This example shows how to add an image slideshow inside a modal, to create a "lightbox":
function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-opacity-off", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-opacity-off"; captionText.innerHTML = dots[slideIndex-1].alt; }