Add a popup (lightbox) with overlay + close buttons and cookie rules with WP settings page

See demo here: Click here

If you want a more "rich controlled" popup (lightbox), with cookie rules and nice setting page in WordPress where you can turn it on/off and set custom CSS and custom text then this is the post for you.

There is a reset button to reset CSS styles with predefined styles for the lightbox. You can add your own CSS if you want.

It's pretty simply. Here is the code you can insert in your code snippet plugin, or direct in your theme functions (remember to have child theme then!)

The full code is this:

// Add settings page in WordPress admin menu under Appearance
function custom_popup_settings_menu() {
    add_submenu_page(
        'themes.php', // Parent menu slug (Appearance)
        'Popup Settings', // Page title
        'Popup Settings', // Menu title
        'manage_options', // Capability required to access the page
        'custom-popup-settings', // Menu slug
        'custom_popup_settings_page' // Callback function to display the settings page
    );
}
add_action('admin_menu', 'custom_popup_settings_menu');

// Callback function to display the settings page
function custom_popup_settings_page() {
    ?>
    <div class="wrap">
        <h2>Popup Settings</h2>
        <form method="post" action="options.php">
            <?php
            settings_fields('custom-popup-settings-group');
            do_settings_sections('custom-popup-settings');
            submit_button();
            ?>
            <button type="button" id="reset-css" class="button">Reset CSS</button> <!-- Add Reset CSS button -->
        </form>
    </div>
    <script>
        document.getElementById('reset-css').addEventListener('click', function() {
            var defaultCss = `
/* Overlay to dim the background */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
    z-index: 9998; /* One layer below the popup */
    display: none; /* Hidden by default */
}

/* Popup styles */
#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centering */
    width: 400px; /* Adjusted width */
    background-color: #ffffff; /* White background */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Increased padding */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    z-index: 9999; /* On top of overlay */
}

/* Text inside popup */
#popup p {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 18px; /* Slightly smaller font size */
    color: #333; /* Darker text color */
}

/* Close button styling */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff4081, #ff6f20); /* Gradient background */
    color: white; /* White text */
    border: none;
    border-radius: 50%; /* Circular button */
    width: 28px; /* Set width */
    height: 28px; /* Set height */
    padding: 0; /* Remove padding for circular shape */
    display: flex; /* Flexbox for centering content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    cursor: pointer;
    font-size: 20px; /* Font size for the close icon */
    transition: transform 0.2s, background-color 0.3s; /* Smooth transitions */
}

.close-button:hover {
    background-color: #ff2c55; /* Darker shade on hover */
    transform: scale(1.1); /* Slightly grow on hover */
}`;
            document.getElementById('custom_css').value = defaultCss; // Set the CSS in the field
        });
    </script>
    <?php
}

// Register and add settings
function custom_popup_register_settings() {
    register_setting('custom-popup-settings-group', 'popup_enabled');
    register_setting('custom-popup-settings-group', 'custom_text');
    register_setting('custom-popup-settings-group', 'custom_css');
    
    add_settings_section('custom-popup-settings', 'Popup Settings', 'custom_popup_settings_section', 'custom-popup-settings');
    
    add_settings_field('popup_enabled', 'Turn on/off Popup', 'popup_enabled_field', 'custom-popup-settings', 'custom-popup-settings');
    add_settings_field('custom_text', 'Text', 'custom_text_field', 'custom-popup-settings', 'custom-popup-settings');
    add_settings_field('custom_css', 'CSS', 'custom_css_field', 'custom-popup-settings', 'custom-popup-settings');
}
add_action('admin_init', 'custom_popup_register_settings');

// Settings fields
function custom_popup_settings_section() {
    echo '<p>Configure your popup settings here. <br />The cache expiration for the cookie <strong>popup_dismissed</strong> set by this code is 30 days. This is determined by the <em>setCookie</em></p>';
}

function popup_enabled_field() {
    $popup_enabled = get_option('popup_enabled');
    echo '<input type="checkbox" id="popup_enabled" name="popup_enabled" value="1" ' . checked(1, $popup_enabled, false) . '>';
}

function custom_text_field() {
    $custom_text = get_option('custom_text');
    echo '<textarea rows="2" id="custom_text" style="width: 300px; height: 250px;" name="custom_text">' . esc_textarea($custom_text) . '</textarea>';
}

function custom_css_field() {
    $custom_css = get_option('custom_css');
    echo '<textarea id="custom_css" style="width: 100%; height: 100vh;" name="custom_css" rows="5">' . esc_textarea($custom_css) . '</textarea>';
}

// Modified script and popup display function
function add_custom_popup_script() {
    if (!isset($_COOKIE['popup_dismissed']) && get_option('popup_enabled')) {
        $custom_text = get_option('custom_text');
        $custom_css = get_option('custom_css');
        ?>
        <style>
            <?php echo $custom_css; ?>
        </style>
        <script>
            function setCookie(name, value, days) {
                const date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                const expires = "expires=" + date.toUTCString();
                document.cookie = name + "=" + value + ";" + expires + ";path=/";
            }

            document.addEventListener('DOMContentLoaded', () => {
                const closeButton = document.querySelector('.close-button');
                if (closeButton) {
                    closeButton.addEventListener('click', () => {
                        const popup = document.getElementById('popup');
                        if (popup) {
                            popup.remove();
                        }
                        setCookie("popup_dismissed", "true", 30);
                    });
                }
            });
        </script>

        <div id="popup">
            <p><?php echo $custom_text; ?></p>
            <button class="close-button">×</button>
        </div>
        <?php
    }
}
add_action('wp_footer', 'add_custom_popup_script');

Remember to exclude this cookie in your cache setting/plugin if you use that stuff. This is quite necessary because if not, then the lightbox will appear no matter if you close it or not.

popup_dismissed

The cookie are saved in 30 days.

You can search for this line in the code to set another date:

"Set cookie for 30 days"