Introduction
Modal is a way for a browser to display important information on a website. Some of its used cases are highlighting an important notice to a user, confirming, or providing additional information.
JavaScript modal also known as a pop-up window is a user interface that displays content on top of the current webpage. Modals are used to provide additional information for user input and confirm an action, you can also use it to create a dynamic page or dashboard with a single HTML file.
Project Overview
I will be using a user Dashboard and a form website to explain how modal works. To create a modal, I will be using HTML, CSS, and JavaScript. HTML and CSS are used to build the modal box while JavaScript handles the behavior of the modal so that when clicked, the pop-up window will be displayed.
Step 1 - The HTML
You will begin with creating the HTML structure for the project using the form tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Example</title>
</head>
<body>
<h1>Modal Example</h1>
<!-- Button to open the modal -->
<button class="btn-open">Open Modal</button>
<!-- The modal -->
<div class="modal-background">
<div class="modal-content">
<h2>Modal Title</h2>
<p>Modal message goes here.</p>
<!--Button to close the modal content-->
<button class="close-btn">Close Modal</button>
</div>
</div>
</body>
</html>
- The HTML code contains a button
<button class="btn-open">Open Modal</button>that would be clicked to view the pop-up and the content,<div class="modal-content">that would display when the button is clicked. - A second button is included with the class
<button class="close-btn">Close Modal</button>which closes the content when clicked on.
Step 2 - The CSS Styling
CSS is necessary to define the box modal and make the project more presentable.
/* Style the modal background */
.modal-background {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
/* Style the modal content */
.modal-content {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: white;
border-radius: 5px;
z-index: 1000;
}
-
.modal-backgroundgives the body container a gray background color which is positionedfixedand placed on the top -top: 0;. -
.modal-contentis the container for the modal content.top: 50%;sets the top edge of the modal to be at50%of the height of the screen (viewport). This means that the top of the modal will be halfway down the screen, vertically centered. -
left: 50%;sets the left edge of the modal to be at50%of the width of the screen. This means that the left edge of the modal will be halfway across the screen, horizontally centered. -
transform: translate(-50%, -50%);moves the modal back up by50%of its own height (to counteract thetop: 50%;setting) and back left by50%of its own width (to counteract the left: 50%; setting). This centers the modal perfectly both horizontally and vertically.
Step 3 - JavaScript
The JavaScript code would ensure the modal box is displayed by responding to a click event.
let modalBG = document.querySelector('.modal-background');
let modalContent = document.querySelector('.modal-content');
let closemodal = document.querySelector('.closebtn');
let openmodal = document.querySelector('.openbtn');
function openModal() {
modalBG.style.display = 'block';
modalContent.style.display = 'block';
}
function closeModal() {
modalBG.style.display = 'none';
modalContent.style.display = 'none';
}
openmodal.onclick = openModal;
closemodal.onclick = closeModal;
- The first part created a variable for each of the class container
let modalBG = document.querySelector('.modal-background');. - The second part created a function that would be executed when the button is clicked
function openModal() { modalBG.style.display = 'block'; modalContent.style.display = 'block'; }.
Initially, the modal-background is set to a display: none; on the CSS, but I created a function that sets the modal-background display: block; when the button <button class="btn-open">Open Modal</button> is clicked.
The result
Codepen Link: https://codepen.io/Tracy4work/pen/bGmvLqO
Do Check it out, try it, and let me know your thoughts. Also like and follow for more helpful articles on web development.
Top comments (4)
Your 'modal' isn't particularly modal at all. It is still possible to access controls on the page that are outside of it. This is a mistake made by many such 'modal' popup functions.
You should probably be using the
<dialog>element which is designed for this purpose. It is also better for accessibility.I have a sample project where I also used , I will add it. But depending on the flow, you won't be able to control access from the pop-up project I built.
Thank you for your contribution Randy.
That is just my point - with your implementation you CAN access things outside of the modal when it is open. If it was implemented correctly, this should not be the case.
(BTW - My name's Jon 😀)
Alright. Thank you Jon.