How to create responsive Modal Images with CSS?
The modal is a dialog window or pop-up message that appears on the webpage. Modal is generally used by web developers to make users aware of some important information appearing on the web page. It can be some confirmation message, warning message, or cookies.
In this tutorial, we will learn to create a responsive modal, which can resize itself in different viewports with CSS. We also need some JavaScript to show and hide modals.
Creating a Responsive Modal
A modal may contain some textual information or some images. The modal generally has a cross symbol to close the modal. which can be added using ×.To create a Modal Follow the steps.
- Add a
<button> to open a modal.
- Then wrap the div for modal-content within the div container which will act as a backdrop. The backdrop container will have
width: 100% and height: 100%.
- Add
background-color and position the backdrop with top and left property. use z-index: 1 to set it to the top.
- Enable the scroll with
overflow: auto
- Add borders with
box-shadow property around the modal content. use background-color , padding , margin and other CSS properties to customize it.
- To make it responsive add the CSS property within
@media with max-width or min-width property.
- Use
onclick() event to open the modal. The javaScript function has been used to close the button too.
Example: Creating a responsive modal
Here is an example to create a responsive modal with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="style.css">
<style>
/* The Modal backdrop */
.modal {
display: none; /* Hidden by default */
position: fixed; /* position fixed at top */
z-index: 1; /* on top */
padding-top: 100px;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.2)
}
/* Modal Content */
.modal-content {
background-color: white;
margin: auto;
padding: 20px;
box-shadow: 10px 5px 5px rgba(0,0,0,0.5);
width: 50%;
text-align: center;
}
/* The Close Button */
.close {
color: #dddddd;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 600px){
.modal-content {
width: 80%;
margin: 15px auto;
padding: 20px;
}
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Button to open modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal conent -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2> Modal Header </h2>
<p>Add any contents on modal . You can add HTML elements on modal content.</p>
<button> Submit </button>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// 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>
Output
Here is the output of the above code.
For large screen
For small screen
Example: Responsive Modal with image
In this example, we have added an image to the modal.
Conclusion
In this tutorial, we have created a responsive modal with CSS. Use @media rule with the CSS to make the modal responsive. We also need JavaScript to hide and show modal as per the user's requirements.
