Here is a straightforward method for creating an overlay popup using pure JavaScript. While using libraries like jQuery can simplify this process, the following code demonstrates how to achieve the same result without additional dependencies.
Included in the CSS code are comments explaining each section's purpose, making it easier to understand and customize as needed.
// Ensure the DOM is loaded before accessing elements
window.onload = function() {
// Assign click event to 'LearnMoreBtn' button
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
};
#overlay {
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup {
display:none;
position:fixed;
left:50%;
top:50%;
width:300px;
height:150px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}
<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
Popup contents here
</div>
To hide the overlay and popup, simply set .style.display back to none.
overlay.style.display = "none";
popup.style.display = "none";
Keep in mind that with this code, the overlay and popup will appear abruptly without any fading effects. For smoother animations, consider using libraries like jQuery or similar alternatives.