Hey friends!

It’s another mini-tutorial Wednesday, and today we’re going to create something you’ve definitely seen on various websites: a modal popup.

Modals are useful for showing messages, login forms, image previews and more and You don’t need any library to build one.

Let’s jump right in!

What We’re Building

We’ll create a basic modal that:

• Pops up when you click a button
• Has a backdrop to dim the page
• Can be closed with an "X" or by clicking outside the modal

Here’s a live version for you to try:

👉 CodePen Demo

(Feel free to fork it and experiment!)

Step 1: Basic HTML Structure

<div class="container">
  <button id="open-modal">Open Modal</button>

  <div class="modal-overlay" id="modal">
    <div class="modal-box">
      <span class="close-btn" id="close-modal">&times;</span>
      <h2>Hello!</h2>
      <p>This is a simple modal built with just HTML, CSS and JavaScript.</p>
    </div>
  </div>
</div>

Step 2: Styling the Modal with CSS

body {
  font-family: sans-serif;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  padding-top: 250px;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-box {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

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

Step 3: Add Interactivity with JavaScript

const openBtn = document.getElementById('open-modal');
const closeBtn = document.getElementById('close-modal');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
  modal.style.display = 'flex';
});

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

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

How It Works

• The modal is hidden by default using display: none.
• When the "Open Modal" button is clicked, we change it to display: flex.
• Clicking the close icon or the overlay closes the modal again.

Simple, clean and easy :).

Optional Styling

You can always adjust or change the styling to suit your project:

• Use animations like scale or fade-in
• Try different background colors
• Make it full-screen for mobile devices

Mini Challenge

Make the modal show dynamic content based on what the user types.
Hint: use querySelector and .textContent to update modal text!

💬 Over to You

Try making your own version that has transitions, Scroll lock or ARIA labels

Let me know if you try it, I'd like to see yours! Connect with me on GitHub

Was this tutorial helpful? Got questions? Or any insight to help me write better tutorials? Let me know in the 💬!

That’s it for today’s midweek mini tutorial!

I’m keeping things light, fun and useful; one small project at a time.

*If you enjoyed this, leave a 💬 or 🧡 to let me know. *

And if you’ve got an idea for something you'd like me to try out next Wednesday, drop it in the comments. 👇

Follow me to see more straight-forward and short tutorials like this :)

If you are curious about what I do, check out my Portfolio

:-)

Web trails
You can also find me here on LinkedIn
or here X (Twitter)

✍🏾 I’m documenting my learning loudly every Wednesday. Follow along if you're learning JavaScript too!
Let’s keep learning together!