Block Editor Popups, Custom Popups, Shortcode

This code adds Popups custom post type under Appearance and adds a Shortcode to call your Custom Popups.

You can create any type of Popup design with blocks.

• Added shortcode [popup popupid="popup-post-id" name="button-name"] which can be used in posts and pages.
• The shortcode accepts two attributes: popupid (the ID of the popup post) and name (the text for the popup’s open button).

and you can add the shortcode wherever you want. It will add as button. it may need some css change to style your button and you have your popups.

function custom_popups_register_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Popups',
        'supports' => array('title', 'editor'),
        'show_in_rest' => true,
		'show_in_menu' => 'themes.php' 
    );
    register_post_type('custom_popup', $args);
}
add_action('init', 'custom_popups_register_post_type');

function custom_popup_shortcode($atts) {
    $atts = shortcode_atts(array(
        'popupid' => '',
        'name' => 'Click Me!'
    ), $atts, 'custom_popup');

    $post_id = $atts['popupid'];
    $button_name = htmlspecialchars($atts['name']);
    $popup_content = get_post_field('post_content', $post_id);

    // Button HTML
    $html = "<button class='openButton openButton-$post_id'>$button_name</button>";

    // Popup HTML stored in a JS variable
    $html .= "<script type='text/javascript'>";
    $html .= "document.addEventListener('DOMContentLoaded', function() {";
    $html .= "var popupHTML = `<div class='popup popup-$post_id'>$popup_content<button class='closeButton closeButton-$post_id'>Close</button></div>`;";
    $html .= "document.body.insertAdjacentHTML('afterbegin', popupHTML);";
    $html .= "});";
    $html .= "</script>";

    return $html;
}
add_shortcode('popup', 'custom_popup_shortcode');

function custom_popup_scripts() {
    ?>
    <style>
		.popup {
			width:90vw;
			height:86vh;
			position: fixed;
			left: 50%;
			top: 50%;
			background-color: white;
			border: 1px solid black;
			padding: 20px;
			transition: transform 0.5s ease;
			transform: translate(-50%, -50%) scale(0);
			display: none; /* Initially hidden */
			z-index:9999;
		}
		.closeButton{
			position:absolute;
			top:10px;
			right:10px;
			z-index:99;
		}
		.openButton{background:white; border:none; color:black; cursor:pointer;}
    </style>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var openButtons = document.getElementsByClassName("openButton");
        var closeButtons = document.getElementsByClassName("closeButton");
        var popups = document.getElementsByClassName("popup");

        Array.from(openButtons).forEach(function(button, index) {
            button.addEventListener("click", function() {
                popups[index].style.display = 'block'; // First set display to block
                requestAnimationFrame(function() {
                    popups[index].style.transform = "translate(-50%, -50%) scale(1)";
                });
            });
        });

        Array.from(closeButtons).forEach(function(button, index) {
            button.addEventListener("click", function() {
                popups[index].style.transform = "translate(-50%, -50%) scale(0)";
                setTimeout(function() {
                    popups[index].style.display = 'none'; // Hide the popup after the animation
                }, 500); // 500ms matches the CSS transition time
            });
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_popup_scripts');