JavascriptHow-ToBeginner · 4 min read

How to Create Modal Popup in JavaScript: Simple Guide

To create a modal popup in JavaScript, use HTML to define the modal structure, CSS to style and hide it initially, and JavaScript to show or hide the modal by changing its style or class. Use element.style.display or classList.toggle() to control the popup visibility.

📐

Syntax

A modal popup typically involves three parts:

HTML: The modal container with content.
CSS: Styles to hide the modal by default and show it when active.
JavaScript: Code to open and close the modal by changing its visibility.

html/css/javascript

<!-- HTML -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Modal content here</p>
  </div>
</div>

/* CSS */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

// JavaScript
const modal = document.getElementById('myModal');
const btn = document.getElementById('openModalBtn');
const span = document.getElementsByClassName('close')[0];

btn.onclick = function() {
  modal.style.display = 'block';
}

span.onclick = function() {
  modal.style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}

💻

Example

This example shows a button that opens a modal popup with some text and a close button. Clicking outside the modal or on the close button hides it.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Modal Popup Example</title>
<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<button id="openModalBtn">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Hello! This is a modal popup.</p>
  </div>
</div>

<script>
const modal = document.getElementById('myModal');
const btn = document.getElementById('openModalBtn');
const span = document.getElementsByClassName('close')[0];

btn.onclick = function() {
  modal.style.display = 'block';
}

span.onclick = function() {
  modal.style.display = 'none';
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}
</script>

</body>
</html>

Output

A webpage with a button labeled 'Open Modal'. Clicking it shows a popup with text and a close (×) button. Clicking × or outside the popup closes it.

⚠️

Common Pitfalls

Common mistakes when creating modals include:

Not hiding the modal initially, so it shows on page load.
Forgetting to add event listeners to close the modal.
Not handling clicks outside the modal to close it.
Using display: none but not resetting it properly to show the modal.

Always test opening and closing behavior carefully.

html

<!-- Wrong: modal visible by default -->
<div id="myModal" class="modal" style="display:block;">...</div>

<!-- Right: hide modal initially -->
<div id="myModal" class="modal" style="display:none;">...</div>

📊

Quick Reference

HTML: Create a container div with modal content.
CSS: Use display: none to hide modal initially and display: block to show.
JavaScript: Use event listeners on buttons and window to toggle modal visibility.
Accessibility: Ensure modal can be closed with keyboard and focus is managed (not covered here but important).

✅

Key Takeaways

Use HTML, CSS, and JavaScript together to create and control modal popups.

Hide the modal by default with CSS and show it by changing styles in JavaScript.

Add event listeners to open and close the modal, including clicks outside the modal.

Test modal behavior to avoid it showing unexpectedly or not closing properly.

Keep accessibility in mind for a better user experience.