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';
}
});