JetEngine CPT preview image in full size modal in backend

gistfile1.txt

Description:
1. Copy the following PHP code and create a PHP snippet using your snippet plugins. Paste the code into the plugin and save it.
This code snippet enhances the JetEngine custom post type (CPT) backend by allowing users to click on preview images to view them
in full size within a modal popup. It includes CSS for styling the modal, JavaScript for handling the click events to open and 
close the modal, and ensures the image opens centered with a pointer cursor on hover. The modal displays the full-size image and 
any associated caption.

______________________________________________

function custom_modal_scripts() {
    ?>
    <style>
        /* Custom Modal CSS */
        .custom-modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.9); 
            justify-content: center; 
            align-items: center;
        }

        .custom-modal-content {
            margin: auto;
            display: block;
            max-width: 700px;
            max-height: 90%;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @keyframes zoom {
            from {transform: scale(0)}
            to {transform: scale(1)}
        }

        .custom-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .custom-close:hover,
        .custom-close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        .preview-holder {
            cursor: pointer;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var modal = document.createElement('div');
            modal.setAttribute('id', 'customModal');
            modal.setAttribute('class', 'custom-modal');
            modal.innerHTML = '<span class="custom-close">&times;</span><img class="custom-modal-content" id="img01"><div id="caption"></div>';
            document.body.appendChild(modal);

            var modalImg = document.getElementById("img01");
            var captionText = document.getElementById("caption");

            document.querySelectorAll('.preview-holder').forEach(function(holder) {
                holder.onclick = function(){
                    modal.style.display = "flex";
                    modalImg.src = this.getAttribute('data-url-attr');
                    captionText.innerHTML = this.querySelector('img').alt;
                }
            });

            var span = document.getElementsByClassName("custom-close")[0];
            span.onclick = function() { 
                modal.style.display = "none";
            }
        });
    </script>
    <?php
}
add_action('admin_footer', 'custom_modal_scripts');