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>

Here is the HTML, which should probably be inserted with JS, and the styles should be in an external stylesheet.

<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div>

Then, you could leverage jQuery to display it.

$('a.modal').bind('click', function(event) { 
    event.preventDefault();
    $('#modal').fadeIn(800);
});

This is only a start, you'll want to learn from this and build upon it. For example, the script should check is(':hidden') and show, and if not then fadeOut(800) or similiar.