Minimal Slide-in Inline Modal With JavaScript

Category: Javascript , Modal & Popup | February 19, 2024
Author:manuelittod
Views Total:38 views
Official Page:Go to website
Last Update:February 19, 2024
License:MIT

Preview:

Minimal Slide-in Inline Modal With JavaScript

Description:

A minimal inline modal script that loads content within the page and slides in smoothly from the right of the screen when activated.

The script helps developers implement modal functionality without a library like jQuery. It slides in the modal window by toggling “active” classes with JavaScript. This keeps the script lightweight and fast.

Functionally, this modal allows for embedding any content type — from text and images to videos and forms — directly within your webpage.

How to use it:

1. Add your modal content to the page.

<div class="modal-container" id="modal-container">
  <div class="modal">
    <h1>Modal Title</h1>
    <p>
      Modal Content
    </p>
    <button id="close">Close The Modal</button>
  </div>
</div>

2. Create a trigger button to toggle the modal window.

<button id="open">
  Toggle
</button>

3. The necessary CSS for the modal window. Feel free to modify & overide the following CSS to create your own styles.

.modal-container {
  display: flex;
  background: rgba(0, 0, 0, .3);
  align-items: center;
  justify-content: center;
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 125%;
  height: 100vh;
  width: 100vw;
  transition: .5s all ease-in-out
}
.modal {
  background: #fff;
  width: 600px;
  max-width: 100%;
  padding: 30px 50px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  text-align: center
}
.active {
  pointer-events: auto;
  left: 0
}

4. Toggle between open and close states by leveraging JavaScript’s classList:

const open = document.getElementById("open");
const modalContainer = document.getElementById("modal-container");
const close = document.getElementById("close");
open.addEventListener("click", () => {
  modalContainer.classList.add("active");
});
close.addEventListener("click", () => {
  modalContainer.classList.remove("active");
});

You Might Be Interested In:


Leave a Reply