Introduction
This chapter demonstrates about the W3.CSS Modal which is known as dialogue boxs/popup windows and which should be displayed on top of the current page following are the concepts covered in this chapter.
- About CSS Modal
- Modal Header and Footer
- Types Of Modals
Description
Modal can be defined as the dialogue box/popup windows which are displayed on top of the current page. Modal is an HTML Container with class="w3-modal-content" and modal content can be any HTML elements like headings, paragraphs, images. Modal can be divided into two types those are shown below.
Open Modal
User can use any HTML element to open the model which can be link or button. In order to open a model user needs to add onclick attribute and add it to the id of the modal.
Closing a modal
User can close by adding w3-closebtn class to the element together with an on click attribute which points to the id of the model.
The code below demonstrates to creating a modal as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">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-closebtn">×</span>
<p>Simple Programming Lessons Tutorials.</p>
<p>Simple Programming Lessons Tutorials.</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also create the different sections in the model by using the w3-container class in order to create different sections user need to use inside the
with class="w3-model-content" The code below demonstrates to display the model header and footer as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-blue">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<h2>Modal Header</h2>
</header>
<div class="w3-container">
<p>SPLESSONS</p>
<p>SPLESSONS</p>
</div>
<footer class="w3-container w3-blue">
<p>splessons tutorials</p>
</footer>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
W3.CSS have several types of Modals which can be used for different purposes following are the some types of Modals as shiwn below.
Animated Modals
User can also create the Animated Modals by using any of the w3-animate-zoom/right/left/top/bottom classes in the model from required direction the code below demonstrates the Animated models as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Animated Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Animated Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-animate-left w3-card-8">
<header class="w3-container w3-blue">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<h2>Modal Header</h2>
</header>
<div class="w3-container">
<p>SPlessons</p>
<p>SPlessons</p>
</div>
<footer class="w3-container w3-blue">
<p>splessons tutorials</p>
</footer>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Modal Image Gallery
user can also built the Modal image galleries when user clicked on the images which should displays in full size. The code below demonstrates to Modal image gallery as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Modal Image Gallery</h2>
<p>Click on the images to display them in full size.</p>
</div>
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="splessons.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity">
</div>
<div class="w3-container w3-third">
<img src="splesson.png" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity">
</div>
<div class="w3-container w3-third">
<img src="cloud.png" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img id="img01" style="width:100%">
</div>
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When user click on the image which should be displayed in full size as shown in below image.
Close Modal
User can also close the Modal by using the little bit of the JavaScript. In which user can close the modal by clicking the outside of the modal box. The code below demonstrates the creating the Close Modal as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<p>In this example we demonstrate how to close the modal by clicking outside of the modal box.</p>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8">
<header class="w3-container w3-blue">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn">×</span>
<h2>splessons</h2>
</header>
<div class="w3-container">
<p>User can close the Modal Click on the "x" or click anywhere outside of the modal!</p>
</div>
<footer class="w3-container w3-blue">
<p>splessons</p>
</footer>
</div>
</div>
</div>
<script>
// 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";
}
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Lightbox
User can also add the image slide shows inside an modal by creating the light box the code below demonstrates to display the light box as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none}
</style>
<body>
<div class="w3-container">
<h2>W3.CSS Lightbox</h2>
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-col s4">
<img src="splessons.jpg" style="width:100%;cursor:pointer"
onclick="openModal();currentDiv(1)" class="w3-hover-shadow">
</div>
<div class="w3-col s4">
<img src="splesson.png" style="width:100%;cursor:pointer"
onclick="openModal();currentDiv(2)" class="w3-hover-shadow">
</div>
<div class="w3-col s4">
<img src="cloud.png" style="width:100%;cursor:pointer"
onclick="openModal();currentDiv(3)" class="w3-hover-shadow">
</div>
</div>
<div id="myModal" class="w3-modal w3-black">
<span class="w3-text-white w3-xxlarge w3-hover-text-grey w3-container w3-display-topright" onclick="closeModal()" style="cursor:pointer">×</span>
<div class="w3-modal-content">
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="splessons.jpg" style="width:100%">
<img class="mySlides" src="splesson.png" style="width:100%">
<img class="mySlides" src="cloud.png" style="width:100%">
<div class="w3-row w3-black w3-center">
<div class="w3-container w3-display-container">
<p id="caption"></p>
<span class="w3-display-left w3-btn-floating" onclick="plusDivs(-1)">❮</span>
<span class="w3-display-right w3-btn-floating" onclick="plusDivs(1)">❯</span>
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="splessons.jpg" style="width:100%" onclick="currentDiv(1)" alt="Nature and sunrise">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="splesson.png" style="width:100%" onclick="currentDiv(2)" alt="Trolltunga, Norway">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="cloud.png" style="width:100%" onclick="currentDiv(3)" alt="Mountains and fjords">
</div>
</div> <!-- End row -->
</div> <!-- End w3-content -->
</div> <!-- End modal content -->
</div> <!-- End modal -->
</div>
<script>
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;
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When user clicked on the image it will display in full size with slide show as shown in below image.
- Animated Modals
- Modal Image Gallery
- Close Modal
- Lightbox
Key Points
- User can also creates the slideshow in modal by creating the lightbox.
- User can also create Animated modal.
- User can also close the modal by using the JavaScript.