I have a problem with Bootstrap 5 modal window.

I am using:

I am calling the modal show using this button

<button id="ticket-agree-button" class="btn btn-outline-success mt-1" onclick="showAgreement();">Købs aftale</button>

And the Javascript

function showAgreement(){
    // Get the modal
    var modal = document.getElementById("ticket-agreement");
    modal.style.display = "block";
}

function closeAgreement(){
    // Get the modal
    var modal = document.getElementById("ticket-agreement");
    modal.style.display = "none";
}

var iframeLoadCount = 0;
function reloadonce(iframe) {
  iframeLoadCount ++;
  if (iframeLoadCount <= 1) {
    iframe.contentWindow.location.reload();
    console.log("reload()");
  }
}

It is working fine, but as soon as the required validation has taken place. The form-fields is shown in front of the modal window. As you can see on the attached screen shot. Before Bootstrap validation there is no problem. Howto solve that?

How it looks in my firefox browser