Coders Packet

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.


- 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:
    @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;
        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');


- 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'.
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.514);
    visibility: hidden;
    visibility: visible;
    top: 50%;
    visibility: visible;



Download Complete Code


No comments yet