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.

HTML Code

 <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

Simple Modal Popup Html Css Javascript - Codewithrandom

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

Simple Modal Popup Html Css Javascript - CodewithrandomSimple Modal Popup Html Css Javascript - Codewithrandom

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

Simple Modal Popup Html Css Javascript - Codewithrandom

Simple Modal Popup Html Css Javascript - Codewithrandom


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

Share on:

Leave a Comment