This JavaScript code creates a popup modal functionality for GenerateBlocks blocks.

generateblocks-popup-modal.css

.hidden-block {
    display: none;
}
.hidden-block.show {
    display: block;
}

.popup-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Background overlay */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-modal.show {
    display: flex; /* Show as flexbox for centering */
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.close-modal {
    background: white;
    color: black;
    border: none;
    padding: 0px 5px 0px 5px;
    border-radius: 50px;
    cursor: pointer;
	
}
.close-modal:hover {
    background: white;
    color: black;
}

generateblocks-popup-modal.js

/**
 * Popup Modal for GenerateBlocks
 * 
 * Description: This JavaScript code creates a popup modal functionality for 
 * GenerateBlocks blocks. It allows users to open a modal by clicking specific 
 * links, and provides multiple ways to close the modal, ensuring a user-friendly 
 * experience. Be sure to use the CSS provided as well.
 * 
 * Author: Chris Eggleston
 * Version: 1.0.0
 + Detailed Tutorial: https://chriseggleston.com/generateblocks-popup
 * 
 * Functionality:
 * - Opens the modal when elements with the class `.show-block-link` are clicked.
 * - Closes the modal when:
 *   - The close button (inside the modal) is clicked.
 *   - The user clicks outside the modal content (on the overlay).
 *   - The `ESC` key is pressed.
 */

document.addEventListener('DOMContentLoaded', function () {
    // Select the modal element by its ID
    const modal = document.getElementById('popup-modal');
    
    // Select all links that should trigger the modal
    const openLinks = document.querySelectorAll('.show-block-link');
    
    // Select the close button inside the modal
    const closeModalButton = modal.querySelector('.close-modal');

    // Open the modal when any of the trigger links are clicked
    openLinks.forEach(link => {
        link.addEventListener('click', function (e) {
            e.preventDefault(); // Prevent the default link behavior
            modal.classList.add('show'); // Add the 'show' class to display the modal
        });
    });

    // Close the modal when the close button is clicked
    closeModalButton.addEventListener('click', function () {
        modal.classList.remove('show'); // Remove the 'show' class to hide the modal
    });

    // Close the modal when clicking on the overlay (outside the modal content)
    modal.addEventListener('click', function (e) {
        if (e.target === modal) { // Check if the click target is the modal itself
            modal.classList.remove('show'); // Remove the 'show' class to hide the modal
        }
    });

    // Close the modal when the 'Escape' key is pressed
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && modal.classList.contains('show')) {
            modal.classList.remove('show'); // Remove the 'show' class to hide the modal
        }
    });
});