Simple Modal Popup Html Css Javascript – Codewithrandom

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.


Table of Contents

<link rel="stylesheet" href="styles.css">
<!-- 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>
<!-- 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>

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.


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 javascriptHope 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

Leave a Reply