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

Simplify Your Link Creation with URLGenerator.online

 In today’s fast-paced digital world, links are everything — whether you're promoting a product, sharing content, or tracking campaigns. But creating clean, customized, and trackable URLs shouldn’t be a time-consuming task. That’s where URLGenerator.online comes in — your one-stop solution for generating smart and efficient URLs in seconds. 🔗 What is URLGenerator.online? URLGenerator.online is a free, easy-to-use online tool that helps you create: Custom URLs UTM-tagged links for marketing campaigns Shortened URLs for social sharing SEO-friendly slugs … and more! Whether you're a digital marketer , content creator , or business owner , this tool simplifies your workflow and helps you track your online success more effectively. ✨ Key Features ✅ Simple and Fast No logins. No complicated forms. Just enter your base URL, customize it as needed, and generate the perfect link in seconds. 📊 UTM Builder for Campaign Tracking Track where your traffic comes f...
Post a Comment
Read more

Discover Fun and Learning with Little Digital Dreams: The Ultimate Kids' YouTube Channel

  Discover Fun and Learning with Little Digital Dreams: The Ultimate Kids' YouTube Channel Are you searching for a safe, engaging, and educational YouTube channel for your kids? Look no further than Little Digital Dreams , the go-to destination for kids' cartoons , learning videos , and fun content designed to spark creativity and inspire young minds. Our channel is packed with colorful animations, interactive lessons, and entertaining stories that make learning an adventure for children of all ages. Why Choose Little Digital Dreams for Your Kids? At Little Digital Dreams , we believe in combining fun with education to create a joyful learning experience. Our videos are carefully crafted to captivate young audiences while teaching essential skills like counting, reading, problem-solving, and social values. Whether your child loves singing along to nursery rhymes, exploring ABCs and 123s, or diving into exciting cartoon adventures, our channel has something for every littl...
Post a Comment
Read more

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