3+ Modal Components - Vanilla CSS

Modals are user interface elements used on websites to display additional content or interactive features without navigating away from the current page. These pop-up windows typically appear on top of the webpage and overlay the existing content, providing a focused area for users to interact with. In this collection, you'll find various designs for modal components that you can easily incorporate into your website's design. Whether you prefer basic modal windows or more visually appealing styles, these components are designed to enhance user interaction and provide a seamless browsing experience for your website visitors.

Expanding Right-Side Modal Presentation

Enhance user interaction on your website with expanding right-side modal presentations. Learn how to implement modal dialogs that smoothly expand from the right side of the screen.

Author: Joe

Preview
Code

<!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>Modal 3</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main class="page-content">
      <button onclick="toggleModal()" type="button">Open Modal</button>
    </main>
    <div class="background" onclick="toggleModal()"></div>
    <div class="modal">
      <div class="modal-content">
        <h2>Modal Window</h2>
        <p>
          You have opened the modal, they are great for confirming actions or
          displaying critical information.
        </p>
      </div>
    </div>
    <script>
      const toggleModal = () => document.body.classList.toggle("open");
    </script>
  </body>
</html>

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: Poppins;
  line-height: 1.5;
  background: #24262a;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: #101012;
  color: #f9f9f9;
  border: 0;
  border-radius: 8px;
  padding: 20px 36px;
  font-size: 16px;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.5);
}

body.open .background {
  visibility: visible;
  opacity: 1;
}

@keyframes modal-in {
  0%,
  50% {
    width: 118px;
    border-radius: 50%;
  }
  55%,
  100% {
    right: 50%;
  }
  60% {
    width: 300px;
    border-radius: 12px;
  }
  75% {
    translate: 50% -50%;
  }
}

.page-content,
.modal,
.background {
  transition: 0.5s;
}

.modal {
  position: fixed;
  top: 50%;
  right: -300px;
  translate: 50% -50%;
  background: #1d2025;
  color: #f9f9f9;
  padding: 48px 40px;
  width: 300px;
  height: 118px;
  border-radius: 12px;
}

@keyframes modal-content-in {
  0%,
  75% {
    opacity: 0;
  }
  85%,
  100% {
    opacity: 1;
  }
}

body.open .modal-content {
  animation: modal-content-in 1s both;
}

body.open > .page-content {
  scale: 0.75;
}

body.open .modal {
  animation: modal-in 1s both;
}

h2 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 21px;
}

p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}

const toggleModal = () => document.body.classList.toggle("open");

Smooth Modal Transition

Improve user interaction on your website with smooth modal transitions. Learn how to implement modal dialogs that seamlessly appear and disappear, providing users with a polished experience.

Author: Joe

Preview
Code

<main class="page-content">
  <button onclick="toggleModal()" type="button">Open Modal</button>
</main>
<div class="background" onclick="toggleModal()"></div>
<div class="modal">
  <h2>Modal Window</h2>
  <p>
    You have opened the modal, they are great for confirming actions or
    displaying critical information.
  </p>
</div>

body {
  font-family: 'Inter Var';
  display: grid;
  height: 100vh; 
  margin: 0;
  place-items: center;
  background: #37353b;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: #1a1a1a;
  color: #f9f9f9;
  border: 0;
  border-radius: 8px;
  padding: 20px 36px;
  font-size: 16px;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.25);
}

body.open .background {
  visibility: visible;
  opacity: 1;
}

@keyframes modal-in {
  0% {
    translate: -50% 10%;
    scale: 0.5;
  }
  100% {
    opacity: 1;
    scale: 1;
    visibility: visible;
  }
}

.page-content,
.modal,
.background {
  transition: 0.5s;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #1a1a1a;
  color: #f9f9f9;
  padding: 48px 40px;
  width: 300px;
  border-radius: 12px;
  translate: -50% -50%;
  scale: 1;
  opacity: 0;
  visibility: hidden;
}

body.open > .page-content {
  scale: 0.75;
}

body.open .modal {
  opacity: 1;
  visibility: visible;
  animation: modal-in 0.5s;
}

h2 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 21px;
}

p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}

const toggleModal = () => document.body.classList.toggle("open");

Animated Modal Window

Elevate user experience on your website with animated modal windows. Learn how to create captivating modal dialogs that grab attention and improve user interaction through seamless animations.

Author: Joe

Preview
Code

<button onclick="toggleModal()" type="button">Open Modal</button>
<div class="modal-background" onclick="toggleModal()"></div>
<div class="modal">
  <h2>Modal Window</h2>
  <p>
    You have opened the modal, they are great for confirming actions or
    displaying critical information.
  </p>
</div>

body {
  font-family: Poppins;
  display: grid;
  height: 100vh; 
  margin: 0;
  place-items: center;
  background: #37353b;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: #1a1a1a;
  color: #f9f9f9;
  border: 0;
  border-radius: 8px;
  padding: 20px 36px;
  font-size: 16px;
}

@keyframes background-in {
  0% {
    scale: 0 0.005;
  }
  33% {
    scale: 1 0.005;
  }
  66%,
  100% {
    scale: 1 1;
  }
}

.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1, 1);
  background: rgba(0, 0, 0, 0.5);
  transition: 0.5s;
}

body.open .modal-background {
  visibility: visible;
  opacity: 1;
  animation: background-in 1s both;
}

@keyframes modal-in {
  0%,
  66% {
    opacity: 0;
    visibility: hidden;
    translate: -50% -30%;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #37353b;
  color: #f9f9f9;
  padding: 48px 40px;
  width: 300px;
  border-radius: 12px;
  translate: -50% -50%;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

body.open .modal {
  opacity: 1;
  visibility: visible;
  animation: modal-in 1s;
}

body.closed .modal {
  opacity: 0;
  visibility: hidden;
  translate: -50% -50%;
}

h2 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 21px;
}

p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}

const toggleModal = () => {
  const bodyClassList = document.body.classList;

  if (bodyClassList.contains("open")) {
    bodyClassList.remove("open");
    bodyClassList.add("closed");
  } else {
    bodyClassList.remove("closed");
    bodyClassList.add("open");
  }
};

Simple Modal

Elevate user interactions with our versatile modal UI component, seamlessly integrating HTML, CSS, and JavaScript functionalities.

Author: Admin

Preview
Code

<button id="openModalBtn" class="modal-btn">Open Modal</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Modal Header</h2>
    <p>This is a responsive modal.</p>
  </div>
</div>

.modal-btn {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.modal-btn:hover {
  background-color: #45a049;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  .modal-content {
    width: 90%;
  }
}

document
  .getElementById('openModalBtn')
  .addEventListener('click', function () {
    document.getElementById('modal').style.display = 'block';
  });

document
  .getElementsByClassName('close')[0]
  .addEventListener('click', function () {
    document.getElementById('modal').style.display = 'none';
  });

window.onclick = function (event) {
  if (event.target == document.getElementById('modal')) {
    document.getElementById('modal').style.display = 'none';
  }
};