JavaScript Modal Library

Project:	Custom popup modal In pure javascript
Author:	sajid ali
Edit Online:	View on CodePen
License:	MIT

Live Preview

Download (File not found!)

This JavaScript code snippet helps you to create a modal library. It creates a modal window that can be triggered by clicking on an element with the class “trigger”. The modal is hidden by default but is made visible when the trigger is clicked. The modal can also be closed by clicking on an element with the class “close-button” or by clicking anywhere outside the modal window and the code begins by using the document.querySelector() method to select the elements with the class names “modal”, “trigger”, and “close-button”. It then defines two functions: toggleModal() which toggles the “show-modal” class on the modal element to show or hide the modal, and windowOnClick(event) which checks if the clicked element is the modal itself and if so, calls the toggleModal() function to close it.

Finally, event listeners are added to the trigger and close-button elements to call the toggleModal() function when clicked, and to the window to listen for clicks anywhere on the page and call the windowOnClick(event) function when the click is on the modal. This allows for the modal to be closed by clicking anywhere outside of it.

How to Create JavaScript Modal Library

Create the HTML structure for the modal library as follows:

<button class="trigger">Click the modal!</button>
<div class="modal">
    <div class="modal-content">
        <span class="close-button">×</span>
        <h1>Hello, I am a modal!</h1>
    </div>
</div>

Now, style the modal library using the following CSS styles:

.trigger{
      text-align: center;
    padding: 7px 13px;
    background: #3e3e3e;
    color: #fff;
    font-size: 15px;
    outline: none;
    border: none;
    border-radius: 5px;
    font-family: cursive;
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

Finally, add the following JavaScript function for its functionality:

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

That’s all! hopefully, you have successfully created the JavaScript modal library. If you have any questions or suggestions, feel free to comment below.

JavaScript Modal Library

How to Create JavaScript Modal Library

Comments

Leave a Reply Cancel reply