custom popup on raf word

functions.php

<?php

// Add this code to your theme's functions.php file

function custom_raf_popup() {
    // Check if the URL contains the 'raf' query parameter
    if (isset($_GET['raf'])) {
        // Add popup HTML, CSS, and JS to footer
        add_action('wp_footer', 'custom_popup_html');
    }
}
add_action('wp_enqueue_scripts', 'custom_raf_popup');

function custom_popup_html() {
    ?>
    <div id="custom-popup" class="custom-popup">
        <div class="popup-content">
            <span class="close-btn">&times;</span>
            <h2>Welcome!</h2>
            <p>This is your custom popup message.</p>
        </div>
    </div>

    <style>
    .custom-popup {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 9999;
    }
    .popup-content {
        background-color: #fff;
        max-width: 460px;
        width: 90%;
        padding: 20px;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .close-btn {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
    .close-btn:hover {
        color: #000;
    }
    </style>

    <script>
    jQuery(document).ready(function($) {
        $('#custom-popup').show();
        
        $('.close-btn').click(function() {
            $('#custom-popup').hide();
        });
        
        $(window).click(function(event) {
            if (event.target == document.getElementById('custom-popup')) {
                $('#custom-popup').hide();
            }
        });
    });
    </script>
    <?php
}