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.

Enhance your website with an engaging expanding right-side modal presentation using HTML, CSS, and JavaScript. This comprehensive guide will walk you through the process of integrating and customizing a right-side modal, ensuring it fits seamlessly 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 expanding right-side modal. This snippet includes the foundational structure, styles, and transition animations needed to create an appealing modal experience. 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 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 an expanding right-side modal presentation on your website using HTML, CSS, and JavaScript. Make the modal component your own by tweaking styles, animations, and functionalities to create a seamless and visually appealing interaction that enhances user engagement and usability.

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 Page Content
<main class="page-content">
  <button onclick="toggleModal()" type="button">Open Modal</button>
</main>
  • <main class="page-content">: This is the main content area of the web page. The class="page-content" can be used to style this section using CSS.
  • <button onclick="toggleModal()" type="button">Open Modal</button>: This is a button that, when clicked, triggers a JavaScript function called toggleModal(). The button has the text "Open Modal".
Background for Modal
<div class="background" onclick="toggleModal()"></div>
  • <div class="background" onclick="toggleModal()"></div>: This is a div element with the class background, which likely serves as the backdrop of the modal. Clicking anywhere on this background will also trigger the toggleModal() function to close the modal.
Modal Window
<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>
  • <div class="modal">: This div represents the modal container. It likely includes CSS rules to be hidden by default and shown when the modal is activated.
  • <div class="modal-content">: This div contains the actual content of the modal, styled separately from the modal container.
  • <h2>Modal Window</h2>: This is a header within the modal content, titled "Modal Window".
  • <p>You have opened the modal, they are great for confirming actions or displaying critical information.</p>: This is a paragraph providing information or instructions within the modal.

CSS Code

General Styles for HTML and Body
html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: Poppins;
  line-height: 1.5;
  background: #24262a;
}
  • html, body: Both the HTML and body elements are set to take up the full height of the viewport.
  • margin: 0: Removes the default margin.
  • display: grid: Uses CSS Grid to layout the content.
  • place-items: center: Centers the content within the body.
  • font-family: Poppins: Sets the font to Poppins.
  • line-height: 1.5: Sets the line height for text.
  • background: #24262a: Sets a dark background color.
Button Styles
button {
  font-family: inherit;
  cursor: pointer;
  background: #101012;
  color: #f9f9f9;
  border: 0;
  border-radius: 8px;
  padding: 20px 36px;
  font-size: 16px;
}
  • font-family: inherit: Inherits the font family from the body.
  • cursor: pointer: Changes the cursor to a pointer when hovering over the button.
  • background: #101012: Sets the button's background color.
  • color: #f9f9f9: Sets the text color.
  • border: 0: Removes the default border.
  • border-radius: 8px: Rounds the corners of the button.
  • padding: 20px 36px: Adds padding inside the button.
  • font-size: 16px: Sets the font size.
Background for Modal
.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;
}
  • position: fixed: Fixes the position relative to the viewport.
  • top: 0, left: 0: Positions it at the top-left corner.
  • width: 100%, height: 100%: Makes it cover the entire viewport.
  • display: grid: Uses CSS Grid to layout the content.
  • place-items: center: Centers the modal within the background.
  • opacity: 0, visibility: hidden: Initially hides the background.
  • background: rgba(0, 0, 0, 0.5): Sets a semi-transparent black background.
  • body.open .background: When the body has the class open, the background becomes visible (visibility: visible) and fully opaque (opacity: 1).
Keyframes for Modal Animation
css 
@keyframes modal-in {
  0%,
  50% {
    width: 118px;
    border-radius: 50%;
  }
  55%,
  100% {
    right: 50%;
  }
  60% {
    width: 300px;
    border-radius: 12px;
  }
  75% {
    translate: 50% -50%;
  }
}
  • @keyframes modal-in: Defines an animation named modal-in for the modal.
  • The modal starts with a small width and round corners, then expands and moves into position.
Transitions for Page Content, Modal, and Background
.page-content,
.modal,
.background {
  transition: 0.5s;
}
  • .page-content, .modal, .background: All these elements will transition smoothly over 0.5 seconds when their styles change.
Modal Styles
.modal {
  position: fixed;
  top: 50%;
  right: -300px;
  translate: 50% -50%;
  background: #1d2025;
  color: #f9f9f9;
  padding: 48px 40px;
  width: 300px;
  height: 118px;
  border-radius: 12px;
}

body.open .modal {
  animation: modal-in 1s both;
}
  • position: fixed: Fixes the position relative to the viewport.
  • top: 50%: Centers it vertically.
  • right: -300px: Positions it off-screen to the right.
  • translate: 50% -50%: Centers it horizontally.
  • background: #1d2025: Sets a dark background color.
  • color: #f9f9f9: Sets the text color.
  • padding: 48px 40px: Adds padding inside the modal.
  • width: 300px, height: 118px: Sets the dimensions.
  • border-radius: 12px: Rounds the corners.
  • body.open .modal: When the body has the class open, the modal plays the modal-in animation over 1 second.
Keyframes for Modal Content Animation
@keyframes modal-content-in {
  0%,
  75% {
    opacity: 0;
  }
  85%,
  100% {
    opacity: 1;
  }
}

body.open .modal-content {
  animation: modal-content-in 1s both;
}
  1. @keyframes modal-content-in: Defines an animation named modal-content-in for the modal content.
  2. The modal content starts invisible and fades in.
  3. body.open .modal-content: When the body has the class open, the modal content plays the modal-content-in animation over 1 second.
Scaling Page Content
body.open > .page-content {
  scale: 0.75;
}
  • body.open > .page-content: When the body has the class open, the main content scales down to 75% of its original size.
Header and Paragraph Styles
h2 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 21px;
}

p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
}
  • h2:
    • margin: 0 0 8px: Sets the bottom margin to 8px and removes other margins.
    • font-weight: 400: Sets a normal font weight.
    • font-size: 21px: Sets the font size.
  • p:
    • margin: 0: Removes the default margin.
    • color: rgba(255, 255, 255, 0.5): Sets the text color to a semi-transparent white.

JavaScript Code

Arrow Function Definition:
  • const toggleModal = () =>: This defines a constant variable named toggleModal and assigns it an arrow function. Arrow functions are a shorthand way to define functions in JavaScript.
Toggling the "open" Class:
  • document.body.classList.toggle("open"): This part of the code is the body of the arrow function. It accesses the body element of the document (document.body), then accesses the classList property of the body element. The classList property is a DOMTokenList that represents the list of classes on the element.
  • .toggle("open"): The toggle method of classList toggles the presence of the specified class name ("open" in this case). If the class is not present, it adds it; if it is present, it removes it.