Modal Pop-up box using HTML, SASS and JavaScript

By Shuvranil Mondal

Pop-up is a graphic user interface. It might be a small box or a window. It appears suddenly or clicking any button by the user. I am gonna make it a very simple way by using HTML, SASS & JS.

Steps:

- First, we have to structure our HTML code proper way.There are three section and one div inside our body tag.
- The First section is for our navbar and give it to id name by navbar.
- The Second section is for our web-content and give it to id name by showcase.
- And the last section is for our pop-up box and give it to id name by popup. Inside our popup section we will create our pop-up content.
- The last div is used to make background blur while box pop-up on window.

- SASS code for pop-up section: 

#popup{
    @include tran;
    position: fixed;
    min-width: 20rem;
    top: -50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: white;
    padding: 2rem 3rem;
    width: 50%;
    min-height: 20rem;
    height: auto;
    z-index: 999;
    visibility: hidden;
}
    .pop-div{
        text-align: center;
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
}

- JavaScript code:

let btn = document.getElementById('btn');
let close = document.getElementById('close');
let black = document.getElementById('black');

let pop=()=>{
    let popup = document.getElementById('popup');
    popup.classList.toggle('active');
    black.classList.toggle('active')
}

btn.addEventListener('click',()=>{
    pop()
})

close.addEventListener('click',()=>{
    pop()
})

- As we can see in our js code, We have taken references from our two button and one div by their id name.
- Then we define pop function to deal with 'active' class.
- Whenever user click on button, pop() function will be trigger and add or remove 'active' class inside our popup section and and our div which id is 'black'.

#black{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.514);
    visibility: hidden;
}

#popup.active{
    visibility: visible;
    top: 50%;
}
#black.active{
    visibility: visible;
}