Have you ever faced that moment in an interview where the interviewer asks you to share your screen and build a simple modal popup using HTML, CSS, and JavaScript — with no libraries?

And then…
You try.
You panic.
And finally, you Failed to Build a Modal popup.

Don’t worry — you’re not alone.
Many candidates struggle with this exact machine coding round task.

In this blog, we’ll learn step-by-step how to create a clean, simple modal popup that:

Opens on button click
Closes on clicking the close icon
Closes when clicking outside
Uses pure HTML, CSS & JavaScript (no frameworks)

By the end of this tutorial, you’ll be able to confidently build this in any interview.

Companies ask this question to understand your knowledge in pure JavaScript and to check if you understand following JavaScript concepts:

• DOM manipulation
• Event listeners
• Conditional rendering (show/hide elements)
• CSS layouts (flexbox, overlay)
• User interaction (click outside to close)
• Basic animations

Create a Modal Popup that opens when a button clicked and close on click close button.

• clicking a button should open a Modal popup
• There should be close button to close the modal
• should use only HTML, CSS, and JavaScript only no Framework.

Let’s follow below instructions and guideline to step by step solutions.

We’ll use codesandbox coding enviroment to build , it’s a online tool for programming. we’ll write comment within out code so that you can understand. Write HTMl boilerplate as you already know write basic every HTMl structure then add.

 <!-- Title of the page -->
    <title>Modal PopUp</title>
 <!-- link external css -->
    <link rel="stylesheet" href="styles.css" />

• As you you know title tag used to save page title and link tag used for link external css styles.css so you should create this file within the folder.

 <!-- This button is responsible for open popup -->
      <button id="openmodal" class="open-modal">Open Modal</button>

• This is the button should present within your body tag, and we have also set class and id attribute to add style and JS event.

<!-- Modal Overlay -->
    <div id="modalOverlay" class="modal-overlay">
      <!-- Modal Content -->
      <div class="modal">
        <!-- Close button -->
        <span id="closeModalBtn" class="close-btn">&times;</span>
        <h2>Modal Popup</h2>
        <p>
          This is a sample modal window created using HTML, CSS, and JavaScript.
        </p>
      </div>
    </div>

• This is div container structure for Modal Popup, we have used class and id you should use it as we’ll add css to give it look like a popup

<script src="main.js"></script>

• Using script tag we used to link Javascript file, I belive you already know that.Plase create a javascrpt file as I created main.js

We’ll see only Important CSS for the Modal that you should write during Interview session.

/* Modal Box */
.modal {
  background: white;
  width: 350px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  animation: slideUp 0.3s ease;
}

/* Overlay - Hidden by Default */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

/* Fade-in Animation */
.modal-overlay.show {
  display: flex;
}

• display: none hides the modal initially
• This is the transparent black background behind the modal.
• background: rgba(0, 0, 0, 0.5); –> rgba(0,0,0) → black, 0.5 → 50% transparency, This creates the “dimmed” background effect.
• Using JavaScript, we add the show class to display the modal and remove it when the close button is clicked. Inside the show class, we set display: flex;, so the modal becomes visible whenever this class is applied.

const openmodal = document.getElementById("openmodal");
const closeModalBtn = document.getElementById("closeModalBtn");
const modalOverlay = document.getElementById("modalOverlay");

• Declare variable and initialize open modal button, close button and modal div container. Then simply write Event listener on click

openmodal.addEventListener("click", () => {
  console.log("open");
  modalOverlay.classList.add("show");
});

closeModalBtn.addEventListener("click", () => {
  modalOverlay.classList.remove("show");
});

That’s it! Your modal should now work perfectly. We simply add the show class when the button is clicked and remove it when the close button is pressed.

You can also try the live CodeSandbox demo here: click here

The full code is provided below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- Title of the page -->
    <title>Modal PopUp</title>
    <!-- link external css -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="tech-container">
      <h1>This is a common interview Question</h1>
      <h2>On click open a Modal PopUp and close button</h2>
      <p>
        <i>By <a href="https://techinterviewhub.in/">Tech Interview Hub</a></i>
      </p>
      <!-- This button is responsible for open popup -->
      <button id="openmodal" class="open-modal">Open Modal</button>
    </div>

    <!-- Modal Overlay -->
    <div id="modalOverlay" class="modal-overlay">
      <!-- Modal Content -->
      <div class="modal">
        <!-- Close button -->
        <span id="closeModalBtn" class="close-btn">&times;</span>
        <h2>Modal Popup</h2>
        <p>
          This is a sample modal window created using HTML, CSS, and JavaScript.
        </p>
      </div>
    </div>

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

* {
  margin: 0;
  padding: 0;
}

h1,
h2 {
  margin: 10px;
}

.tech-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#openmodal {
  margin: 20px 10px;
  padding: 16px 20px;
  border-radius: 10px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

#openmodal:hover {
  color: blue;
  background-color: white;
  border: 1px solid blue;
}

/* Modal Box */
.modal {
  background: white;
  width: 350px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  animation: slideUp 0.3s ease;
}

/* Overlay - Hidden by Default */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

/* Fade-in Animation */
.modal-overlay.show {
  display: flex;
  /* animation: fadeIn 0.3s ease; */
}

#closeModalBtn {
  cursor: pointer;
}

const openmodal = document.getElementById("openmodal");
const closeModalBtn = document.getElementById("closeModalBtn");
const modalOverlay = document.getElementById("modalOverlay");

openmodal.addEventListener("click", () => {
  console.log("open");
  modalOverlay.classList.add("show");
});

closeModalBtn.addEventListener("click", () => {
  modalOverlay.classList.remove("show");
});

Building a modal popup is all about practice and confidence. The more you try these small UI challenges, the better you’ll perform in real interviews. If you want to continue improving, make sure to explore more of our frontend interview questions and coding challenges.

Please leave this field empty

Stay Ahead in Your Tech Career 🚀

We don’t spam! Read our privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.