3 min read
Getting Started With Modals
Last Update: 13 July, 2022Creating a modal can look intimidating if you are a beginner. It involves HTML, CSS and of course JavaScript. Working with all the aspects of front-end web development. You can avoid using a modal but it's just too useful to avoid all together. Modals are great for showing some information to our visitor, send in a quick form, or alert them about something etc. The only limit is your imagination. Let's begin!
§Starting With A Basic Definition
A modal is a an element that appears in front of of the main content you have on your page. It requires user interaction and engagement. It's a good way to show the user what you want them to see and get their attentions.
§Uses of Modals
Well first of all modals are mostly used for inform users about the things we as web developers think are important and deserves users attention. To get rid of a modal user needs to interact with it. This interaction ensures the most amount of attention possible. You can also warn users of inform them about something they are about to do.
Creating a form in a modal is possible and even entertaining if done right. It allos users to stay in the same page and handle a sending a form without cluttering the page the visitor is viewing. You can handle sign-ins, sign-ups contacts, etc.
You can display media to your visitor in form of a modal if you think the media deserves attention. It's an awesome way to get maximum attention of your visitor. Imagine a long, boring text. If you were to divide this long text with some information in form of media that allowed the visitors to digest the content in another way, you can be sure that you will have happier visitors that spend more time on your websites.
§The Workings of A Modal
The modal appears on top of the main content, blocking it and not allowing interaction with the main content. Closing the modals requires user action. To give the feeling that the content other than the modal is less important, usually modals make the background darker. This gathers the users' attention to the modal. I personally use modals in order to inform visitors / users and share some media. I believe processes such as sign-ins and sign-ups deserve their own pages since they can be very complicated.
I have seen modals being used in many different and creative ways and I'm sure if you think about a littke after the following examples you can think of some ways you can utilize modals in your projects.
§Creating Two Basic Modals
We will be creating two very basic modal examples. With these examples you will have a better understanding on the workings of the modal element. Let's start!
In my examples my divs for modals already exist in my HTML file. They are behind the main content and invisible. I also added two buttons on my page to make them visible.
Our css is also very simple. Our modals are going to have "position: absolute" values because we want them to cover the whole page. We will create two main divs for each modal. One of these divs will cover the whole page and the other one will be placed in the middle and have our main content in it.
In our js file all we need to do is handling the necessary changes for the modals. We are going to change the css attributes of the modals to make them visible / invisible.
I will add comments when I think it's complicated. Let's start with the code for the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>Modal</title>
</head>
<body>
<div id="modal-container-one" class="modal">
<div class="modal-text-box">
<p>This is modal one, very basic, very simple.</p>
<button id="modal-one-close-button" class="close-button">Close</button>
</div>
</div>
<div id="modal-container-two" class="modal">
<div class="modal-text-box">
<p>This is modal two. There is a little action going on with the width, nothing too complicated. </p>
<button id="modal-two-close-button" class="close-button">Close</button>
</div>
</div>
<div class="button-container">
<button id="button-one" class="modal-open-button">Open Modal One</button>
<button id="button-two" class="modal-open-button">Open Modal Two</button>
</div>
</body>
</html>
Nothing too complicated so far. Now Let's see the code for our style.css file:
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
background: rgb(87,255,244);
background: linear-gradient(153deg, rgba(87,255,244,1) 0%, rgba(103,255,199,1) 63%);
align-items: center;
justify-content: center;
}
.modal {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
align-items: center;
justify-content: center;
transition: 0.4s;
display: flex;
}
#modal-container-one {
z-index: -1;
opacity: 0;
}
#modal-container-two {
z-index: -1;
opacity: 0;
width: 0px;
}
.modal-text-box {
padding: 50px;
background: rgb(253,90,255);
background: radial-gradient(circle, rgba(253,90,255,1) 0%, rgba(45,249,253,1) 100%);
font-size: 1.4rem;
color: white;
height: 200px;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.close-button {
background-color: red;
border: none;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
color: white;
font-size: 1.4rem;
transition: 0.3s;
}
.close-button:hover {
cursor: pointer;
box-shadow: 0px 0px 12px 2px red;
}
.button-container {
display: flex;
flex-direction: column;
}
.modal-open-button {
padding: 15px 20px;
margin: 10px 0;
border: none;
background-color: violet;
font-size: 1.4rem;
border-radius: 5px;
color: white;
box-shadow: 2px 2px 12px 2px rgb(255, 255, 255);
transition: 0.3s;
}
.modal-open-button:hover {
cursor: pointer;
background-color: rgb(241, 172, 241);
color: rgb(0, 0, 0);
box-shadow: 2px 2px 12px 2px rgb(0, 0, 0);
}
I tried not to use anything fancy in order to keep this project very concise.
// Let's start by selecting our elements
// The buttons for opening our modals
const modalBtnOne = document.querySelector("#button-one")
const modalBtnTwo = document.querySelector("#button-two")
// Outer divs of our modals
const modalOne = document.querySelector("#modal-container-one")
const modalTwo = document.querySelector("#modal-container-two")
// And finally close buttons
const modalOneCloseButton = document.querySelector("#modal-one-close-button");
const modalTwoCloseButton = document.querySelector("#modal-two-close-button");
let modalOpen = false // Gonna check if there's an active modal
window.addEventListener('click', (event) => {
// If there's an open modal
if(modalOpen) {
// Ok both modals are mostly the same
// Modal two has an extra, simple growth animation
// but other than that as you can see, nothing fancy
if(event.target === modalOneCloseButton) {
modalOpen = false
modalOne.style.zIndex = "-1";
modalOne.style.opacity = "0";
} else if(event.target === modalTwoCloseButton) {
modalOpen = false
modalTwo.style.zIndex = "-1";
modalTwo.style.opacity = "0";
modalTwo.style.width = "0px"
}
} else if(event.target === modalBtnOne) {
// z-index value could be as small as 4 but I just like
// making it 100 when it doesn't really matter
modalOpen = true;
modalOne.style.zIndex = "100";
modalOne.style.opacity = "1";
}
else if(event.target === modalBtnTwo) {
modalOpen = true;
modalTwo.style.zIndex = "100"
modalTwo.style.opacity = "1"
// grow it to full size to view
modalTwo.style.width = "100%"
}
})
We are done. Congratulations, modals are not the easiest elements to create and hopefully you have better understanding on the workings and uses of modals. I hope you have fun going through this post, I definitely did while creating it.
Don't stop here, make more elaborate modals, include them to your existing projects, make new projects for your modals, etc. Keep on learning !
Ilker AkbiyikTable of Contents
Related Posts
