Modal Popup & Dropdown Menu in JavaScript

Features:

  • Click to open/close modal popup
  • Click to open/close dropdown menu
  • Close modal on outside click or Esc key
  • Simple, clean UI


Folder Structure 

modal-dropdown/
├── index.html
├── style.css
└── script.js


HTML: index.html 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Modal & Dropdown</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="container">
<h1>Modal & Dropdown Example</h1>

<!-- Modal Trigger -->
<button id="openModalBtn">Open Modal</button>

<!-- Dropdown -->
<div class="dropdown">
<button id="dropdownBtn">Dropdown</button>
<div class="dropdown-content" id="dropdownMenu">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
  </div>
</div>

<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close-btn" id="closeModalBtn">×</span>
<h2>Hello!</h2>
<p>This is a modal popup using JavaScript.</p>
</div>
</div>

<script src="script.js"></script>
</body>
</html>


CSS: style.css 

body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  margin: 0;
  padding: 40px;
  display: flex;
  justify-content: center;
}

.container {
  text-align: center;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  margin: 10px;
  cursor: pointer;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background: white;
  padding: 20px;
  margin: 15% auto;
  border-radius: 10px;
  max-width: 400px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* Dropdown Styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
  min-width: 160px;
  z-index: 1;
  border-radius: 8px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #eee;
}


JavaScript: script.js 

// Modal Logic
const modal = document.getElementById('modal');
const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');

openModalBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

closeModalBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

window.addEventListener('click', e => {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
});

window.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    modal.style.display = 'none';
  }
});

// Dropdown Logic
const dropdownBtn = document.getElementById('dropdownBtn');
const dropdownMenu = document.getElementById('dropdownMenu');

dropdownBtn.addEventListener('click', () => {
  dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
});

window.addEventListener('click', function(e) {
  if (!e.target.matches('#dropdownBtn')) {
    dropdownMenu.style.display = 'none';
  }
});