Skip to main content

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>


Comments

Post a Comment

Popular posts from this blog

Digital World

In the modern era, we find ourselves immersed in a digital world. Technology has transformed the way we live, work, communicate, and explore. From the convenience of online shopping to the vast knowledge at our fingertips, the digital realm has become an integral part of our daily lives. In this blog, we will explore the various aspects of the digital world, its impact on society, and the opportunities it presents for individuals and businesses alike.   The Power of Connectivity: The digital world has connected us in ways unimaginable just a few decades ago. Social media platforms enable us to bridge distances and connect with friends, family, and even strangers across the globe. Instant messaging and video calls have made communication seamless, fostering relationships and collaborations beyond borders. This connectivity has brought us closer together and expanded our horizons.   Access to Information and Knowledge: The internet has revolutionized access to info...
Post a Comment
Read more

Little Digital Dreams: Where Learning Meets Fun – The Ultimate YouTube Channel for Kids!

  In today’s digital age, finding safe, educational, and entertaining content for kids can feel like searching for a needle in a haystack. Enter  Little Digital Dreams  – a YouTube channel designed to spark curiosity, nurture creativity, and make learning an adventure for children! If you’re a parent, guardian, or educator looking for wholesome screen time that combines fun with foundational skills, you’ve just found your go-to resource. Let’s dive into why  Little Digital Dreams  is the channel your child will love—and why you’ll love it too! What Makes  Little Digital Dreams  Special? This channel isn’t just another collection of random cartoons. Every video is crafted with care to ensure kids are  learning, laughing, and growing . Here’s what you’ll find: Enchanting Kids’ Cartoon Videos From magical fairy tales to playful animal adventures, our animated stories are packed with vibrant visuals and relatable characters. These cartoons aren’t just...
Post a Comment
Read more

Bootstrap 5 Carousel Code

  <!-- Carousel --> < div  id ="demo"  class ="carousel slide"  data-bs-ride ="carousel" >    <!-- Indicators/dots -->    < div  class ="carousel-indicators" >      < button  type ="button"  data-bs-target ="#demo"  data-bs-slide-to ="0"  class ="active" > < /button >      < button  type ="button"  data-bs-target ="#demo"  data-bs-slide-to ="1" > < /button >      < button  type ="button"  data-bs-target ="#demo"  data-bs-slide-to ="2" > < /button >    < /div >    <!-- The slideshow/carousel -->    < div  class ="carousel-inner" >      < div  class ="carousel-item active" >        < img  src ="la.jpg"  alt ="Los Angeles"  class ="d-block w-100" ...
Post a Comment
Read more