Popups are a great way to grab your visitors' attention, promote offers, or highlight important content. In this guide, you'll learn how to create a custom popup for your website using HTML, CSS, and JavaScript. With a few lines of code, you can add an eye-catching popup that displays on page load, helping boost engagement. This tutorial covers the essentials: styling the popup, displaying it when the page loads, and adding a close button. Whether you're a beginner or an experienced developer, follow along to enhance your website with a sleek and functional popup!
<!-- Popup Overlay -->
<div id="popupOverlay">
<div id="popupBox">
<span class="closeBtn" onclick="closePopup()">×</span>
<div class="popupContent">
<h2>WHY CHOOSE US?</h2>
<p>700 Plus Google Reviews with 5 ★ Rating.</p>
<p>Check out our reviews by clicking the link below:</p>
<a href="https://www.google.com/maps/place//data=!4m2!3m1!1s0x6ad65bd198c19359:0xe50b3a4a75d7801?source=g.page.share" target="_blank">View Reviews</a>
<ul>
<li>Fixed Fares</li>
<li>Professional Chauffeurs</li>
<li>Meet & Greet Service</li>
<li>Accredited Sanitized Vehicles</li>
<li>Vaccinated Drivers</li>
</ul>
</div>
</div>
</div>
<!-- JavaScript to handle popup behavior -->
<script>
// Function to show the popup
function showPopup() {
document.getElementById('popupOverlay').style.display = 'block';
}
// Function to close the popup
function closePopup() {
document.getElementById('popupOverlay').style.display = 'none';
}
// Show the popup when the site loads
window.onload = function() {
showPopup();
};
</script>
<style>
/* Styles for the overlay */
#popupOverlay {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
z-index: 9999;
}
/* Styles for the popup box */
#popupBox {
position: relative;
width: 300px;
padding: 20px;
margin: 15% auto;
background-color: #fff;
box-shadow: 0px 0px 10px #000;
border-radius: 10px;
}
/* Styles for the close button */
.closeBtn {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
color: #333;
}
/* Popup content styles */
.popupContent {
text-align: center;
}
</style>
Comments
Post a Comment