popup with headline, image & paragraph using html, css & js
popup with headline, image & paragraph using html, css & js
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
/* Popup container - can be positioned as desired */
.popup {
display: none; /* Hidden by default */
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
}
/* Popup content */
.popup-content {
position: absolute;
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 300px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}
/* Close button */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
/* CTA button */
.cta-btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #0073e6;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
/* Image */
/* define div here as only 'img' is changing other images*/
.popup-image {
height: auto;
width: 300px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);;
}
</style>
</head>
<body style="text-align:center">
<div id="popup-cta" class="popup">
<div class="popup-content">
<span id="close-popup" class="close-btn">×</span>
<h2>Headline</h2>
<img src="image_url" class="popup-image">
<p>Paragraph</p>
<a href="button_url" class="cta-btn">Register Now</a>
</div>
</div>
<script>
// When the user clicks on div, open the popup
document.addEventListener('DOMContentLoaded', function() {
// Show the popup after 3 seconds
setTimeout(function() {
document.getElementById('popup-cta').style.display = 'block';
}, 1000);
// Close the popup when the close button is clicked
document.getElementById('close-popup').addEventListener('click', function() {
document.getElementById('popup-cta').style.display = 'none';
});
});
</script>
</body>
</html>