JetFormBuilder change display message to Popup

gistfile1.txt

<style>
/* ===== Overlay ===== */
#overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(1200px 400px at 50% 60%, rgba(0,0,0,0.06), transparent 60%),
              rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: none;
}

/* ===== Popup Card ===== */
#messagePopup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  background: #fff;
  border-radius: 22px;
  box-shadow:
    0 22px 50px rgba(0,0,0,0.10),
    0 8px 20px rgba(0,0,0,0.06),
    0 1px 0 rgba(255,255,255,0.8) inset;
  text-align: center;
  padding: 36px 28px 28px;
  display: none;
  opacity: 0;
  z-index: 101;
  transition: all 0.3s ease;
}

/* ===== Icon Ring Style ===== */
.popup-icon {
  position: relative;
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  font-size: 0;
}
.popup-icon::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #F0FAF4;
  box-shadow: 0 0 0 3px #16A34A inset;
}
.popup-icon::after {
  content: attr(data-symbol);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 36px;
  font-weight: 700;
  color: #14532d;
  transform: translateY(1px);
}

/* Error Variant */
.error-icon::before {
  background: #FFF2F2;
  box-shadow: 0 0 0 3px #E23C3C inset;
}
.error-icon::after {
  color: #7a1c1c;
}

/* ===== Texts ===== */
#popupMessageContent h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}
#popupMessageContent p {
  margin: 0 0 18px;
  font-size: 15px;
  color: #6B7280;
}

/* ===== Button ===== */
#messagePopup button {
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #00C6FF, #0072FF);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,114,255,0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}
#messagePopup button:hover {
  filter: brightness(0.97);
  transform: translateY(-1px);
}

/* ===== Pop Animation ===== */
#messagePopup.showing {
  animation: pop-in 260ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes pop-in {
  from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
  #messagePopup {
    width: 90%;
    padding: 30px 20px;
  }
}
</style>

<div id="overlay"></div>
<div id="messagePopup">
  <div id="popupIcon" class="popup-icon"></div>
  <div id="popupMessageContent"></div>
  <button id="popupButton" onclick="closePopup()">Close</button>
</div>

<script nonce="your-generated-nonce-here" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script nonce="your-generated-nonce-here">
jQuery(document).ready(function($) {
  var targetPages = ['registration'];
  var currentSlug = window.location.pathname.split('/').filter(Boolean).pop();

  if (targetPages.includes(currentSlug)) {

    function openPopupWithMessage(messageText) {
      let isSuccess = $('.jet-form-builder-message--success').text() !== "";
      let iconClass = isSuccess ? "success-icon" : "error-icon";
      let title = isSuccess ? "Submission Successful!" : "Submission Failed!";
      let subtitle = isSuccess 
        ? "Your form has been submitted successfully. Our team will review your details soon." 
        : "There was an issue submitting your form. Please check your details and try again.";
      let symbol = isSuccess ? "✓" : "!";
      let btnText = isSuccess ? "OK" : "TRY AGAIN";

      $('#popupIcon')
        .removeClass('success-icon error-icon')
        .addClass(iconClass)
        .attr('data-symbol', symbol);

      $('#popupMessageContent').html(`<h3>${title}</h3><p>${subtitle}</p>`);
      $('#popupButton').text(btnText);

      $('#overlay').fadeIn(300);
      $('#messagePopup').show().addClass('showing').animate({opacity: 1}, 300);
      setTimeout(()=>$('#messagePopup').removeClass('showing'), 300);
    }

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

    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();
      }
    }

    $('form').on('submit', function() {
      $(document).ajaxComplete(function() {
        checkAndDisplayFormMessages();
      });
    });
  }
});
</script>