In the previous article, we started our discussion about modals. We saw what our essentials components of a modal and how they interact with each other. In this article, we shall see how to create a modal with header and footer content, how to create card modal and how to create image modal. So, let the fun begin.
To create a Modal with header and footer, the rest of the process is similar. You have an event source, a w3-modal which acts as a container class and w3-modal-content class. Inside the div with class w3-modal-content class, create a header element for header content, followed by a simple div which acts a content. Finally, add a footer element for footer of the modal. You can style the header,content and footer element the way you want. Take a look at the following example to see modal with header and content in action.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div>
<div id="Modal1" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-orange">
<span onclick="document.getElementById('Modal1').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>This is the header</h2>
</header>
<div class="w3-container">
<p>Welcome to knowledge hills.</p>
<p>Best tutorial site</p>
</div>
<footer class="w3-container w3-pink">
<p>Copyright @ Knowledgehills.com</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Like all the other elements, you can also give a card like look to a modal. To do so, simply add w3-card-number class to the div with class w3-modal-content. This gives a card like look to the modal window. Take a look at the following example.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div>
<div id="Modal1" class="w3-modal">
<div class="w3-modal-content w3-card-8">
<header class="w3-container w3-orange">
<span onclick="document.getElementById('Modal1').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>This is the header</h2>
</header>
<div class="w3-container">
<p>Welcome to knowledge hills.</p>
<p>Best tutorial site</p>
</div>
<footer class="w3-container w3-pink">
<p>Copyright @ Knowledgehills.com</p>
</footer>
</div>
</div>
</div>
</body>
</html>
Another very useful use of modal is developing an image gallery where images are initially shown in the small sizes. When a user clicks the image, they are displayed in the form of modal in a larger size. To create image modal, the rest of the process is similar. Simply replace the source which is usually a button or link with the image. The size of the image should be smaller. Then add the actual larger image inside the div with class w3-modal-content window. Bind the onclick event of the small image with this modal. Now, when you click the small window. A modal with image of larger size shall display. Take a look at the following code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-container">
<h2>Modal Image Example</h2>
<p>Click the Image to Display It in the form of Modal</p>
<img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" style="width:30%;cursor:zoom-in"
onclick="document.getElementById('Modal1').style.display='block'">
</div>
<div id="Modal1" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-button w3-hover-blue w3-xlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" style="width:100%">
</div>
</div>
</div>
</body>
</html>