Disclaimer
In this article, you will be shown the basic way of creating a simple popup on click of a button, we assume you know some notion about JavaScript event listeners which will be used to act more on this and js arrow functions
End result
Once you’ve completed this guide, you should have a popup that looks something like the display bellow:
Get started: HTML
First, create a HTML, CSS, JS respective files and link them basically to get started. Since this is a simple design, create a button element in the body and give it an id of btn or what ever id you will use to call in both css and JavaScript as seen bellow:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
<body>
<div class="div">
<button id="btn">Click Me</button>
</div>
<div id="popup">
<span>You just clicked the button</span>
<span>This Is A PopUP</span>
<button onclick="closs()">Close</button>
</div>
<script src="script.js"></script>
</body>
</html>
[/dm_code_snippet]
The juicy bit: CSS
The CSS is the most important part of building a popup. First, we’ll begin by styling the popup_background. I’ll comment in the CSS to help you understand. Remember that this is the background/overlay, not the popup itself
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”css” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
*{
margin: 0;
padding: 0;
}
body{
background-color: rgb(4, 4, 160);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100vh;
}
#btn{
height: 40px;
width: 200px;
cursor: pointer;
}
#popup{
width: 0px;
height: 0px;
background-color: rgb(179, 179, 179);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: fixed;
overflow: hidden;
border-radius: 20px;
font-size: 2rem;
text-align: center;
font-weight: bolder;
}
button{
width: 100px;
height: 40px;
border: 2px solid black;
}
[/dm_code_snippet]
Making it work: JavaScript
This bit is really easy. I mean really easy. First, create a script tag and enter the following:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
var popup = document.getElementById('btn');
popup.addEventListener('click', function(){
document.getElementById('popup').style.width= '300px';
document.getElementById('popup').style.height= '300px';
document.getElementById('popup').style.transition= '300ms';
})
closs = () =>{
document.getElementById('popup').style.width= '0px';
document.getElementById('popup').style.height= '0px';
document.getElementById('popup').style.transition= '300ms';
}
[/dm_code_snippet]
Final notes
If you have any issue understanding this tutorial or find an issue with it, please comment it below and I’ll be happy to help or contact us via icon you find on the site of this page.
Read more of our articles links bellow
Advantages online shop (e-commerce) for your business
6 essential qualities of a web editor
Check out best recommended hosting services
learn what hosting to chose this 2022 click here now
