Append the dialog element to the body using document.body.appendChild(myDialog)

function Popup() {
  var myDialog = document.createElement("dialog");
  document.body.appendChild(myDialog)
  var text = document.createTextNode("This is a dialog window");
  myDialog.appendChild(text);
  myDialog.showModal();
}

<button onclick="Popup()" role='button'>
    Show Alert
</button>

You are actually describing the native bootstrap's modal's behavior. I'm not sure I'm understanding your problem well but:

Given a modal with the id #modalSignin, you should implement the signup button like so: <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalSignin"> ... </button>

OR if for whatever reason you can't use the data-bs-target attribute, you should then use a specific event listener:

$('#your-signup-button-id').on('click', function() {
    var modalToggle = new bootstrap.Modal(document.getElementById('the-modal-id'))
    modalToggle.show()
});

Alternative using vanilla JS:

document.getElementById('your-signup-button-id').addEventListener('click', function() { 
    var modalToggle = new bootstrap.Modal(document.getElementById('the-modal-id'))
    modalToggle.show()
});

This should do it as long as you don't have any css rule that could break the native behavior (ie. if the user can scroll on the main content for example)

See more here: Bootstrap 5 modal

Your example code isn't just regular JavaScript, it looks like jQuery and it looks like you are trying to use a jQuery modal plugin. If that's the route you want to go, you need to do some setup that depends on your specific situation. Your code and setup is so complex and specific that I recommend learning more fundamentals before proceeding OR rebuilding this specific part of your application.

Also; you are using IDs to target your elements, but you have multiple elements with the same ID, which should never happen.

Below I have a tiny demo of a custom "modal" type thing using just HTML, CSS and vanilla (meaning plain) JS without jQuery

function toggleModal(e) {
    e.stopPropagation()
    backdrop.classList.toggle("active")
}
const backdrop = document.querySelector(".backdrop")
const button = document.querySelector("button")
backdrop.addEventListener("click", toggleModal)
button.addEventListener("click", toggleModal)

.backdrop {
  display: none;
  position: fixed;
  width:100vw;
  height:100vh;
  cursor:pointer;
  background:#00000088;
  top: 0;
}
.backdrop.active {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  background: #ffffff;
  min-width:30vw;
  min-height: 30vh;
  cursor:initial;
}

<button>OpenModal</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel consectetur ex, id pharetra ex. In ligula leo, euismod eu gravida sed, facilisis non dolor. In hac habitasse platea dictumst. Aenean sapien dolor, aliquam quis odio a, feugiat rutrum turpis. Duis eu eleifend urna. Fusce quis quam hendrerit, varius nibh sed, tempor erat. Fusce iaculis finibus lacus in fringilla. Nullam tincidunt odio eu efficitur lacinia. Vivamus id tempus mauris, in laoreet magna. Integer ornare, odio quis ullamcorper ultrices, purus nisl elementum erat, id semper eros nunc et orci. Morbi neque purus, fringilla ut rutrum quis, commodo vel arcu.</p>
<p>Integer sit amet volutpat ante. Donec sed sem non nisi hendrerit volutpat ac vel ante. Suspendisse nec nulla interdum, aliquam mauris non, porta elit. Suspendisse potenti. Proin placerat tincidunt malesuada. Nullam accumsan mi finibus orci pretium pharetra. Nunc at efficitur leo, sit amet ultrices arcu. Aenean non nibh congue, efficitur justo et, posuere ante. Phasellus maximus augue at pulvinar pulvinar. Integer tempor, orci eu pellentesque finibus, enim tortor hendrerit dui, quis semper lorem dolor ac nulla. Mauris congue venenatis blandit. Pellentesque a mi in odio venenatis iaculis vel non elit.</p>

<div class="backdrop">
  <div class="modal">
    I am a modal
  </div>
</div>