Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
In this video I have made a simple popup box / modal using HTML CSS and JavaScript. Learn how to create simple popup Box / modal.
This is cool, however the background of dark black is switched with the white background of the text. Can anyone help me?
oh mannnnnn…….
finally i m able to make these popups… thanx a lot
very helpful! thanks,
Getting a problem output appears outside the button instead of inside
Simple and effective thank you!
So helpful thank you
But I dont know why my close button doesnt work 🙁
hi! i tried following your code; but it dosent seem to work 🙁
thank you bro, nice tutorial.
can you share the code mine is not working is does not pop up when I click the button
here"s the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>popup</title>
</head>
<body>
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
<p>hello this is just a test
I am working on a big project I love
to eat fruits I am a programmer
</p>
</div>
</div>
<button onclick="togglePopup()">Show Popup</button>
<script src="index.js"></script>
</body>
</html>
here's the CSS code and js:
.popup .overlay{
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 1;
display: none;
}
.popup .content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(0);
background: #fff;
width: 450px;
height: 220px;
z-index: 2;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.popup .close-btn {
position: absolute;
right: 20px;
top: 20 ;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height: 30px;
text-align: center;
border-radius: 50%;
}
.popup.active .overlay{
display: block;
}
.popup.active .content{
transition: all 300ms ease-in-out;
transform: translate(-50%,-50%) scale(1);
}
function togglePopup(){
document.getElementsById("popup-1").classList.toggle("active");
}
Thank you, used this in my first website project allthough I have no idea what 80% of the css refers to 😀