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:#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; }
Submitted by Shuvranil Mondal (Shuvranil002)
Download packets of source code on Coders Packet
Comments