Simple Modal Popup Html Css Javascript – Codewithrandom
.png "Simple Modal Popup Html Css Javascript - Codewithrandom")
Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Simple Modal Popup. We use HTML, Css, and javascript for Simple Modal Popup. I hope you enjoy our blog so let’s start with a basic HTML structure for the Simple Modal Popup.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 1) div with an ID of 'overlay' -->
<div id="overlay">
<!-- 2) inside the div of 'overlay', div with an ID of 'modal' -->
<div id="modal">
<h2>Contact Details</h2>
<p>Homer Simpson, 742 Evergreen Terrace (no spam please!) 😀</p>
<button id="close-modal">Close! 👋</button>
</div>
</div>
<!-- 4 -->
<!-- h1 tag with the text '👇 Click to reveal Homer's contact details! 👇' -->
<h1>👇 Click to reveal Homer's contact details! 👇</h1>
<!-- button with the text 'Contact Me 📨' and with an ID of 'open-modal' -->
<button id="open-modal">Contact Me 📨</button>
<script src="index.pack.js"></script>
</body>
</html>
There is all the HTML code for the Simple Modal Popup. Now, you can see an output with Simple Modal Popup then we write javascript for Simple Modal Popup.
output
CSS code
html, body {
margin: 0;
padding: 50px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#open-modal, #close-modal {
background-color: royalblue;
color: white;
padding: 15px;
font-size: 20px;
cursor: pointer;
}
#modal {
background-color: white;
max-width: 600px;
margin: 0 auto;
padding: 20px;
height: 200px;
position: relative;
top: 30%;
}
#overlay {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
Css Updated output
Javascript code
document.getElementById("open-modal").addEventListener("click", function() {
document.getElementById("overlay").style.display = "block";
})
document.getElementById("close-modal").addEventListener("click", function() {
document.getElementById("overlay").style.display = "none";
})
Final output
Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like the Simple Modal Popup. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create a Simple Modal Popup using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code by – Sikaab
