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.

An animated modal window created with HTML, CSS, and JavaScript is a powerful tool for modern web interfaces, offering a visually appealing and interactive way to display content or capture user input without navigating away from the current page.

Key Features:

  • Interactive Display: Utilize animations to smoothly open and close the modal window, enhancing user experience with seamless transitions.
  • Customizable Design: Tailor the modal window's appearance using CSS, including colors, borders, shadows, and animations, to align with your website's branding and design language.
  • User-Friendly Navigation: Improve usability by focusing user attention on important information or actions within the modal, keeping the rest of the page dimmed or inactive.
  • Responsive Layout: Ensure the modal window adapts to various screen sizes, providing a consistent experience across desktops, tablets, and mobile devices.
  • Integration Ease: Easily integrate the animated modal window into your website's HTML structure and CSS styles, leveraging JavaScript for dynamic functionality like form submissions or interactive content.

Enhance user interaction and engagement on your website with an animated modal window. Whether used for displaying images, videos, forms, or notifications, this UI component provides a polished and effective solution for enhancing user experience and achieving your website's goals.

Steps to Copy the Code

Step 1: Copy the Code Snippet

Start by copying the HTML, CSS, and JavaScript code snippet provided above. This snippet includes the foundational structure, styles, and animations for an animated modal window. Simply select the code, click the copy button, and paste it into your HTML file where you want the modal to appear.

Step 2: Link CSS and JavaScript Files

Ensure the required CSS and JavaScript files are linked correctly in your HTML document. Add the following <link> tag in the <head> section to import the CSS styles:

<link rel="stylesheet" href="styles.css">

Include the following <script> tags at the end of your <body> section to import the JavaScript files:

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

Replace "styles.css" and "script.js" with the respective file names you have saved in your CSS and JavaScript code.

Step 3: Customize and Make it Yours

Personalize the modal window to align with your website's branding and functionality requirements. Modify the styles, animations, content, and interactions using the provided HTML structure and CSS classes. Incorporate additional JavaScript functionalities as needed to enhance user experience and functionality.

Code Explanation

HTML Code

Button to Open Modal:
<button onclick="toggleModal()" type="button">Open Modal</button>
  • This <button> element is used to trigger the opening of the modal.
  • onclick="toggleModal()" specifies that when this button is clicked, it will call a JavaScript function named toggleModal().
  • type="button" ensures that the button does not submit a form (which is the default behavior for <button> in HTML).
Modal Background:
<div class="modal-background" onclick="toggleModal()"></div>
  • This <div> element serves as a semi-transparent background overlay for the modal.
  • It covers the entire viewport when the modal is open.
  • class="modal-background" likely applies some CSS styles to make it semi-transparent and cover the entire screen.
  • onclick="toggleModal()" means that clicking anywhere on this background will call the toggleModal() function to close the modal.
Modal Content:
<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>
  • This <div> with class="modal" contains the actual content of the modal.
  • Inside it, there's an <h2> heading and a <p> paragraph of text.
  • When the modal is open, this content is displayed in the center of the screen, typically overlaid on top of the .modal-background.

CSS Code

Body Styles:
body {
  font-family: Poppins;
  display: grid;
  height: 100vh; /* Full viewport height */
  margin: 0;
  place-items: center; /* Center content horizontally and vertically */
  background: #37353b; /* Dark background color */
}
  • Sets the font-family to "Poppins" for all text in the body.
  • Uses CSS Grid (display: grid) to center content vertically and horizontally (place-items: center) within the viewport (100vh height).
  • Sets a dark background color (#37353b) for the entire page.
Button Styles:
button {
  font-family: inherit; /* Inherits font-family from body */
  cursor: pointer; /* Cursor changes to pointer on hover */
  background: #1a1a1a; /* Dark background color for buttons */
  color: #f9f9f9; /* Light text color */
  border: 0;
  border-radius: 8px; /* Rounded corners */
  padding: 20px 36px; /* Padding inside the button */
  font-size: 16px; /* Font size of the text */
}
  • Makes buttons inherit the font-family from the body.
  • Styles buttons with a dark background (#1a1a1a), light text color (#f9f9f9), and rounded corners (border-radius: 8px).
  • Specifies padding and font size for buttons.
Keyframe Animations:
@keyframes background-in {
  0% {
    transform: scale(0, 0.005);
  }
  33% {
    transform: scale(1, 0.005);
  }
  66%, 100% {
    transform: scale(1, 1);
  }
}
@keyframes modal-in {
  0%, 66% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -30%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
  }
}
  • background-in: Defines a keyframe animation for the modal background scaling in. It starts from a very small scale (0, 0.005), expands to full width but minimal height (1, 0.005), and then settles at full scale (1, 1).
  • modal-in: Defines a keyframe animation for the modal itself fading in and sliding into position. It starts invisible (opacity: 0), hidden (visibility: hidden), and positioned off-center (translate: -50%, -30%), then transitions to fully visible (opacity: 1), visible (visibility: visible), and centered (translate: -50%, -50%).
Modal Background Styles:
.modal-background {
  position: fixed; /* Fixed positioning relative to viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center; /* Center content vertically and horizontally */
  opacity: 0; /* Initially transparent */
  visibility: hidden; /* Initially hidden */
  transform: scale(1, 1); /* Initial scale */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  transition: 0.5s; /* Smooth transition effect */
}

body.open .modal-background {
  visibility: visible; /* Makes modal background visible */
  opacity: 1; /* Fades in */
  animation: background-in 1s both; /* Applies 'background-in' animation */
}
  • Sets up a fixed-positioned (position: fixed) overlay (modal-background) covering the entire viewport (100% width and height).
  • Initially hidden (opacity: 0 and visibility: hidden), with a semi-transparent black background (rgba(0, 0, 0, 0.5)).
  • Transitions smoothly (transition: 0.5s) when becoming visible (opacity: 1 and visibility: visible) and applies the background-in animation when the body has the class open.
Modal Styles:
.modal {
  position: fixed; /* Fixed positioning relative to viewport */
  top: 50%; /* Vertically centered */
  left: 50%; /* Horizontally centered */
  background: #37353b; /* Dark background color */
  color: #f9f9f9; /* Light text color */
  padding: 48px 40px; /* Padding inside the modal */
  width: 300px; /* Fixed width */
  border-radius: 12px; /* Rounded corners */
  transform: translate(-50%, -50%); /* Center the modal */
  opacity: 0; /* Initially transparent */
  visibility: hidden; /* Initially hidden */
  transition: 0.3s; /* Smooth transition effect */
}

body.open .modal {
  opacity: 1; /* Fades in */
  visibility: visible; /* Makes modal visible */
  animation: modal-in 1s; /* Applies 'modal-in' animation */
}
  • Sets up a fixed-positioned (position: fixed) modal centered both vertically (top: 50%) and horizontally (left: 50%).
  • Styled with a dark background (#37353b), light text color (#f9f9f9), padding (48px top and bottom, 40px left and right), fixed width (300px), and rounded corners (border-radius: 12px).
  • Initially hidden (opacity: 0 and visibility: hidden), and centered using transform: translate(-50%, -50%).
  • Transitions smoothly (transition: 0.3s) when becoming visible (opacity: 1 and visibility: visible) and applies the modal-in animation when the body has the class open.
Additional Styles:
h2 {
  margin: 0 0 8px; /* Top and bottom margin */
  font-weight: 400; /* Normal font weight */
  font-size: 21px; /* Font size */
}

p {
  margin: 0; /* No margin */
  color: rgba(255, 255, 255, 0.5); /* Semi-transparent white text */
}
  • Styles <h2> headings with a small top and bottom margin (0 0 8px), normal font weight (400), and font size (21px).
  • Styles <p> paragraphs with no margin (0) and semi-transparent white text (rgba(255, 255, 255, 0.5)).

JavaScript Code

Function Definition:
const toggleModal = () => {
  // Function body
};
  • This declares a function named toggleModal using arrow function syntax (() => { ... }).
Accessing the <body> Element's ClassList:
const bodyClassList = document.body.classList;
  • document.body refers to the <body> element of the HTML document.
  • .classList is a property that returns a collection of the CSS classes applied to the element.
Toggle Logic:
if (bodyClassList.contains("open")) {
  bodyClassList.remove("open");
  bodyClassList.add("closed");
} else {
  bodyClassList.remove("closed");
  bodyClassList.add("open");
}
  • Checks if the <body> element has the class "open" using .contains("open").
  • If it does have the class "open", it removes "open" and adds "closed".
  • If it does not have the class "open" (meaning it has "closed"), it removes "closed" and adds "open".