Building an Amazing Popup Modal using HTML & CSS

In web development, creating a stylish and functional modal box can enhance user experience and provide a clean and modern design element. In this tutorial, we’ll walk through the process of building a responsive and visually appealing popup modal box using HTML, CSS, and a touch of JavaScript.

Overview:

In this tutorial, we’ll cover the following key aspects:

HTML Structure:
- The basic HTML structure defines the modal container, button triggers, modal overlay, and the content within the modal.
CSS Styling:
- The CSS styles are responsible for the overall look and feel of the modal box, including positioning, animations, and responsiveness.
JavaScript Interactivity:
- JavaScript is used to handle the interactivity of the modal, such as showing and hiding it on button clicks.

HTML Structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup Modal Box</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
  </head>
  <body>
    <div class="modal-container">
      <button class="modal-button show">Show Modal</button>
      <span class="modal-overlay"></span>

      <div class="modal-content">
        <i class="fa-regular fa-circle-check"></i>
        <h2>Completed</h2>
        <h3>You have successfully downloaded all the source code files.</h3>

        <div class="buttons">
          <button class="modal-button close-btn">Ok, Close</button>
          <button class="modal-button">Open File</button>
        </div>
      </div>
    </div>
  </body>
</html>

HTML

Explanation:
- The HTML structure consists of a modal container, a button to trigger the modal, a modal overlay, and the content inside the modal. The modal content includes an icon, a heading, and buttons.

CSS Styling:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #1e1d29;
}

.modal-container {
  position: fixed;
  height: 100%;
  width: 100%;
}

.modal-button {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  padding: 14px 22px;
  border: none;
  background: #4070f4;
  border-radius: 6px;
  cursor: pointer;
}

.modal-button:hover {
  background-color: #265df2;
}

.modal-button.show,
.modal-content {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.modal-container.active .modal-button.show {
  display: none;
}

.modal-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}

.modal-container.active .modal-overlay {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
}

.modal-container.active .modal-content {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-content i {
  font-size: 70px;
  color: #4070f4;
}

.modal-content h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-content h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-content .buttons {
  margin-top: 25px;
}

.modal-content button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}

CSS

Explanation:
- The CSS styles define the appearance of the modal, including its position, background, fonts, and animations. It ensures a clean and modern design that adapts well to different screen sizes.

JavaScript Interactivity:

const modalContainer = document.querySelector('.modal-container');
const modalOverlay = document.querySelector('.modal-overlay');
const modalButton = document.querySelector('.modal-button.show');
const closeButton = document.querySelector('.close-btn');

modalButton.addEventListener('click', () =>
  modalContainer.classList.add('active'),
);
modalOverlay.addEventListener('click', () =>
  modalContainer.classList.remove('active'),
);
closeButton.addEventListener('click', () =>
  modalContainer.classList.remove('active'),
);

JavaScript

Explanation:
- JavaScript handles the interactivity of the modal. When the “Show Modal” button is clicked, the modal becomes active, and when the overlay or the “Ok, Close” button is clicked, the modal becomes inactive.

Detailed Explanation:

HTML Structure:
- The <div class="modal-container"> wraps the entire modal structure.
- The modal is triggered by a button with the class modal-button show.
- The overlay <span class="modal-overlay"></span> covers the background when the modal is active.
- The modal content includes an icon, a heading, a subheading, and action buttons.
CSS Styling:
- box-sizing: border-box; ensures proper box model behavior.
- The background color of the body is set to a dark shade.
- The modal container is set to cover the entire screen and is initially hidden.
- The modal button has a stylish appearance with a hover effect.
- The modal content is styled with a white background, rounded corners, and a subtle box shadow.
- The content is initially hidden, and it scales in when becoming visible.
JavaScript Interactivity:
- The JavaScript code selects the necessary elements.
- Clicking the “Show Modal” button adds the active class to the modal container, making it visible.
- Clicking the overlay or the “Ok, Close” button removes the active class, hiding the modal.

Conclusion:

By combining HTML, CSS, and JavaScript, we’ve created a stylish and responsive popup modal box. This can be customized further to suit the design needs of various websites, providing a clean and engaging user interface.

Feel free to experiment with the code, adjust styles, and add more features to make it unique for your projects.

Happy coding!