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.

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");

Enhance user interaction on your website with a smooth modal transition using HTML, CSS, and JavaScript. This comprehensive guide will take you through the process of integrating and customizing a modal with smooth transition effects, ensuring it seamlessly fits into your website's design and functionality.

Step 1: Copy the Code Snippet

Start by copying the provided HTML, CSS, and JavaScript code snippet for the smooth modal transition. This snippet includes the foundational structure, styles, and transition animations needed to create a visually appealing modal experience. 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 necessary 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 actual file names where you have saved your CSS and JavaScript code.

Step 3: Customize and Make it Yours

Personalize the modal transition to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the modal's appearance, transition effects, content, and interaction behaviors. Experiment with different animations, timings, and modal behaviors to create a seamless and engaging user experience.

By following these steps, you can implement and customize a smooth modal transition on your website using HTML, CSS, and JavaScript. Make the modal transition component your own by tweaking styles, animations, and functionalities to create a seamless and visually appealing interaction that enhances user engagement and usability.

Code Explanation

HTML Code

Main Content Container:

<main class="page-content">
  <button onclick="toggleModal()" type="button">Open Modal</button>
</main>

<main> is a semantic HTML5 element used to represent the main content of the document.
class="page-content" is a CSS class applied to <main>, likely for styling purposes.
Inside <main>, there is a <button> element.
onclick="toggleModal()": When this button is clicked, it triggers the toggleModal() function in JavaScript to open or close a modal window.
type="button": Specifies that this <button> is not a submit button but rather a regular button.

Background Overlay for Modal:

<div class="background" onclick="toggleModal()"></div>

<div> with class="background" serves as a semi-transparent background overlay for the modal.
When clicked (onclick="toggleModal()"), it also triggers the toggleModal() function to close the modal.
This <div> typically covers the entire viewport to prevent interaction with content outside the modal.

Modal Window:

<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>

<div> with class="modal" contains the actual modal content.
Inside it, there is an <h2> heading and a <p> paragraph.
This content appears when the modal is opened.
By default (visibility: hidden and opacity: 0 in CSS not shown here), the modal is not visible on the page.

CSS Code

Font and Layout:

The body selector sets the font family to ‘Inter Var’, which is a variable font. It also uses CSS Grid for layout (display: grid) and centers its content vertically and horizontally (place-items: center). The background color is #37353b.
The height: 100vh ensures that the body takes up the full viewport height.

Button Styling:

The button selector styles buttons:
Inherits the font family from the parent (font-family: inherit).
Sets the cursor to a pointer (cursor: pointer).
Background color is #1a1a1a, text color is #f9f9f9.
No border (border: 0), with rounded corners (border-radius: 8px).
Padding of 20px vertically and 36px horizontally.
Font size of 16px.

Background Overlay:

The .background class creates an overlay:
Positioned fixed at the top left corner.
Covers the entire viewport (width: 100%; height: 100%).
Initially hidden (opacity: 0; visibility: hidden).
Background color is a semi-transparent black (rgba(0, 0, 0, 0.25)).
Becomes visible when the body has the class .open.

Modal Animation:

The @keyframes modal-in animation:
- Starts with a scaled-down position (translate: -50% 10%; scale: 0.5).
- Ends with full opacity and visibility (opacity: 1; scale: 1; visibility: visible).
The .modal class:
- Positioned fixed at the center of the viewport.
- Background color is #1a1a1a, text color is #f9f9f9.
- Padding, width, and border-radius are set.
- Initially hidden (opacity: 0; visibility: hidden).
- Becomes visible when the body has the class .open.

Page Content Transition:

The .page-content, .modal, and .background classes have a transition duration of 0.5 seconds.

Heading and Paragraph Styling:

The h2 selector styles headings with a font size of 21px and a slight margin.
The p selector sets the color to a faded white (rgba(255, 255, 255, 0.5)).

JavaScript Code

The code defines a function called toggleModal.

This function toggles the presence of the "open" class on the document.body element.

When the function is called, it checks whether the "open" class is already present on the body:

If the class is present, it removes it.
If the class is not present, it adds it.