Tech

How to Create a Pop-Up using HTML, CSS and Javascript

What is a Popup?

Pop-up ads or pop-ups are often forms of online advertising on the World Wide Web intended to attract web traffic or capture email addresses. Pop-ups are generally new web browser windows to display advertisements.

Steps On How To Create A Pop-up Using Html, Css And Javascript

 

Step 1

Add HTML

<div class=”popup” onclick=”myFunction()”>Click me!

<span class=”popuptext” id=”myPopup”>Popup text…</span>

</div>

 

Step 2

Add CSS:

Example

/* Popup container */

.popup {

position: relative;

display: inline-block;

cursor: pointer;

}

 

/* The actual popup (appears on top) */

.popup .popuptext {

visibility: hidden;

width: 160px;

background-color: #555;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 8px 0;

position: absolute;

z-index: 1;

bottom: 125%;

left: 50%;

margin-left: -80px;

}

 

/* Popup arrow */

.popup .popuptext::after {

content: “”;

position: absolute;

top: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: #555 transparent transparent transparent;

}

 

/* Toggle this class when clicking on the popup container (hide and show the popup) */

.popup .show {

visibility: visible;

-webkit-animation: fadeIn 1s;

animation: fadeIn 1s

}

/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {

from {opacity: 0;}

to {opacity: 1;}

}

@keyframes fadeIn {

from {opacity: 0;}

to {opacity:1 ;}

}

Step 3

Add JavaScript:

<script>

// When the user clicks on <div>, open the popup

function myFunction() {

var popup = document.getElementById(‘myPopup’);

popup.classList.toggle(‘show’);

}

</script>

 

credit: http://www.w3schools.com

 


P.S. Thanks for reading this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top