Modal Window (Popup)
A basic template to show a popup on click.
👀 Demo in Action
💡 Use Cases and Benefits of This Template
- ユーザーへのNotification・注意喚起・確認ダイアログに便利
- Can be adapted to enlarge images or display forms
- Keeps information on the same page, improving UX
- Easy to style for a modern design
- Dark background helps highlight important content
📋 Copyable and Pasteable Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Window</title>
<style>
/* Modal overlay background */
.modal-overlay {
display: none; /* Initially hidden */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 1000; /* Ensures the modal appears above other elements */
}
/* Modal window */
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Centered */
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
/* Close button */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
/* Button style */
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<section>
<h2>👀 Demo</h2>
<div style="text-align: center; font-size: 1.7rem; margin: 1rem 0;">👇 Click the button below 👇</div>
<button onclick="openModal()">Open Modal</button>
<!-- Modal overlay -->
<div class="modal-overlay" id="modal">
<div class="modal">
<button class="close-btn" onclick="closeModal()">×</button>
<h3>Notification</h3>
<p>This is a modal window. You can close it by clicking outside or using the × button.</p>
</div>
</div>
</section>
<script>
// Function to open the modal
function openModal() {
document.getElementById('modal').style.display = 'block'; // Show modal
}
// Function to close the modal
function closeModal() {
document.getElementById('modal').style.display = 'none'; // Hide modal
}
// Close the modal by clicking outside
document.querySelector('.modal-overlay').addEventListener('click', function(event) {
if (event.target === document.querySelector('.modal-overlay')) {
closeModal();
}
});
</script>
</body>
</html>
🧩 Applications and Practical Use
Modal windows are highly effective when you want to draw a user’s attention to specific information. Using the onclick event to control show/hide functionality is simple, yet this technique is widely used in real-world UI implementations.
For example, it's ideal for enlarging images or displaying registration/contact forms without navigating to a different page. With a line like document.getElementById("modal").style.display = "flex", you can create a popup centered on a darkened background.
The closing process is also easy—just use a closeModal() function to change the style.display to "none", minimizing code complexity.
To further enhance UX/UI, consider adding background click-to-close functionality or supporting the Esc key to dismiss the modal. For JavaScript beginners, this is also a great topic to practice DOM manipulation and event handling.