CODEwithCREST

support@codewithcrest.com

Simple Popup in html and css and javascript

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

 

Leave a Reply

Your email address will not be published.

Table of Contents