JetFormBuilder change display message to Popup

gistfile1.txt

<style>
/* Overlay Styling */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 100;
    backdrop-filter: blur(5px) brightness(40%);
    display: none;
}

/* Popup Styling */
#messagePopup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 101;
    box-sizing: border-box;
    text-align: center;
    display: none;
    opacity: 0;
    top: 45%;
}

#popupMessageContent {
    margin-bottom: 20px;
}

#messagePopup button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#messagePopup button:hover {
    background-color: #0056b3;
}

@media (max-width: 1024px) {
    #messagePopup {
        width: 80%;
    }
}

@media (max-width: 767px) {
    #messagePopup {
        width: 90%;
    }
}
</style>

<div id="overlay"></div>
<div id="messagePopup">
    <div id="popupMessageContent"></div>
    <button onclick="closePopup()">Close</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
    function openPopupWithMessage(messageText) {
        $('#popupMessageContent').text(messageText);
        $('#overlay').fadeIn(300);
        $('#messagePopup').css('top', '45%').show().animate({opacity: 1, top: "50%"}, 300);
    }

    window.closePopup = function() {
        $('#messagePopup').animate({opacity: 0, top: "45%"}, 300, function() {
            $(this).hide();
        });
        $('#overlay').fadeOut(300);
    };

    // Check for form messages immediately on page load and after AJAX completions
    function checkAndDisplayFormMessages() {
        let successMessage = $('.jet-form-builder-message--success').text();
        let errorMessage = $('.jet-form-builder-message--error').text();
        if (successMessage || errorMessage) {
            let message = successMessage || errorMessage;
            openPopupWithMessage(message);
            $('.jet-form-builder-message--success, .jet-form-builder-message--error').hide();
        }
    }

    checkAndDisplayFormMessages(); // Check on page load

    $(document).ajaxComplete(function() {
        checkAndDisplayFormMessages(); // Check again after any AJAX call completes
    });
});
</script>