Step-by-Step Guide to Adding a Custom Popup in HTML with CSS and JavaScript

 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>