Simple modal element with pure js and animation effect example

Simple modal element with pure js and animation effect examples

by Paul Leech

HTML

<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <div class="logo">
        <a href="https://codeorum.com/" class="codeorum"><img alt="codeorum" src="https://codeorum.com/images/codeorum-logo-dark.svg"></a>
        <a href="https://zovko.pro/" class="mirko-zovko"><img alt="mirko-zovko" src="https://codeorum.com/images/zovko-logo-dark.svg"></a>
    </div>
    <div class="container">
        <h1>Simple modal element with pure js and animation effect example</h1>

        <div class="button-container"> <!-- only for demo -->
            <p class="btn btn-modal dark" data-id="fin-fout-modal">Fade in fade out</p>   
            <p class="btn btn-modal dark" data-id="slide-top-modal">Slide from top</p>       
            <p class="btn btn-modal dark" data-id="slide-bottom-modal">Slide from bottom</p>
            <p class="btn btn-modal dark" data-id="slide-left-modal">Slide from left</p>  
            <p class="btn btn-modal dark" data-id="slide-right-modal">Slide from right</p>          
            <p class="btn btn-modal dark" data-id="bounce-modal">Bounce</p>
        </div>
        <div class="button-container"> <!-- only for demo -->
            <p class="btn btn-modal dark" data-id="sm-modal">Small</p>   
            <p class="btn btn-modal dark" data-id="n-modal">Normal</p>       
            <p class="btn btn-modal dark" data-id="l-modal">Large</p>
            <p class="btn btn-modal dark" data-id="xl-modal">Extra large</p>
            <p class="btn btn-modal dark" data-id="full-modal">Full</p>
            <p class="btn btn-modal dark" data-id="close-options-modal">Close/not options</p>
        </div>
    </div>

     
<!-- Modal container and dark background   -->
<div class="modal" id="fin-fout-modal">

    <!-- Content container  -->
    <div class="m-container">

        <h4 class="m-title">Modal title</h4>  <!-- Title  -->
        <p class="m-close"></p> <!-- Main close button ...

CSS

body{
    margin: 0;
    padding: 0;
    background: #FFC371;
    background: linear-gradient(to right, #FF5F6D, #FFC371);
    font-family: 'Quicksand', sans-serif;
    color: #262626;
}
*{
    box-sizing: border-box;
}
.logo {
    position: relative;
    display: flex;
    margin:10px;
    flex-direction: row;
    z-index: 1000;
    
    a {
        display: block;
        height: 30px;
        width: auto;
        cursor: pointer;
        margin-right: 10px;
        img {
            height: 100%;
            width: auto;
        }
    }
  }

.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 10px 100px 10px;
    h1{
        text-align: center;
        margin-bottom: 30px;
        font-weight: 500;
    }
    h2{
        font-weight: 500;
    }
}
.button-container{
    display: flex;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.btn{
    display: flex;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    margin: 5px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 5px 10px -5px rgba(0,0,0,.15),0 10px 10px -5px rgba(0,0,0,.1);
    &:hover{
        box-shadow: 0 20px 25px -5px rgba(0,0,0,.15),0 10px 10px -5px rgba(0,0,0,.1);
    }
    &.red{
        background-color: rgb(231, 97, 97);
        color: #fff;
        &:hover{
            background-color: rgb(224, 131, 131);
        }
    }
    &.blue{
        background-color: rgb(56, 129, 224);
        color: #fff;
        &:hover{
            background-color: rgb(108, 163, 236);
        }
    }
    &.dark{
        background-color: #262626;
        color: #fff;
        &:hover{
            background-color: #363636;
        }
    }
}

.modal{
    position: fixed;
    z-index: 9999;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.3);
    padding:...

JavaScript

//addEventListener on mouse click for opening modal on clas btn-modal
document.addEventListener('click', function (e) {

    //check is the right element clicked
    if (!e.target.matches('.btn-modal')) return;
    else{

       //select right modal from id-data
       var modal = document.querySelectorAll('#'+e.target.dataset.id);
       Array.prototype.forEach.call(modal, function (el) {

            //add active class on modal
            el.classList.add('active');
       });
    }
});


//addEventListener on mouse click for closing modal on modal dark background
document.addEventListener('click', function (e) {

    //check is the right element clicked
    if (!e.target.matches('.modal')) return;
    else{

        // if modal have do-not-close class it will not close it self on background click
        if (e.target.classList.contains('do-not-close')) return;
        else{

            //remove active class on modal
            e.target.classList.remove('active');
        }      
    }
});

//addEventListener on mouse click for closing modal on custom button
document.addEventListener('click', function (e) {

    //check is the right element clicked
    if (!e.target.matches('.close-modal')) return;
    else{

       //select right modal from id-data
       var modal = document.querySelectorAll('#'+e.target.dataset.id);
       Array.prototype.forEach.call(modal, function (el) {

            //remove active class on modal
            el.classList.remove('active');
       });
    }
});

//addEventListener on mouse click for standard closing modal on right top "x"
document.addEventListener('click', function (e) {

    //check is the right element clicked
    if (!e.target.matches('.m-close')) return;
    else{
       //remove active class on modal
       e.target.parentElement.parentElement.classList.remove('active');
    }
});