Как сделать возможным переход по сыллке, если она попадает под модальное окно?

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var content = document.getElementById("modal-content");
var a_catalog = document.getElementById("a_catalogue");


btn.onmouseover = function() {
  modal.style.display = "block";
  a_catalog.style.position = "relative";
  a_catalog.style.zIndex = "1000001";
}
content.onmouseover = function() {
  modal.style.display = "block";
  a_catalog.style.zIndex = "1000001";
}
modal.onmouseout = function() {
	modal.style.display = "none";
  a_catalog.style.zIndex = "100";
}

.modal-content {
  position: relative;
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 740px;
  z-index: 1000;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

<a href="/catalogue" id="a_catalogue">
 <p class="p4 menu_item" id="myBtn">
   Каталог
<i class="fa fa-bars" aria-hidden="true" id="myBtn"></i>
 </p>
</a>
<div id="myModal" class="modal">
  <div class="modal-content" id="modal-content">
    <div class="row">
      <div class="col-lg-6">
        <h6>
          текст
         </h6>
         <hr class="modal_hr">
         <a href="/">
           <p class="p1_bold modal_a">
              сыллка
            </p>
          </a>
          <a href="/">
            <p class="p1_bold modal_a">
               сыллка
             </p>
           </a>
           <a href="/">
            <p class="p1_bold modal_a">
              сыллка
             </p>
            </a>
            <a href="/">
             <p class="p1_bold modal_a">
              сыллка
             </p>
            </a>
            <a href="/">
             <p class="p1_bold modal_a">
              сыллка
             </p>
            </a>
            <a href="/">
              <p class="p1_bold modal_a">
                сыллка
               </p>
              </a>
            </div>              
          </div>
        </div>
      </div>
</div>

const modal = document.querySelector("#myModal");
const btn = document.querySelector("#myBtn");
const content = document.querySelector("#modal-content");
const a_catalog = document.querySelector("#a_catalogue");


btn.onmouseover = function() {
  modal.classList.add('active');
  a_catalog.classList.add('active');
}
content.onmouseover = function() {
  modal.classList.add('active');
  a_catalog.classList.add('active');
}
modal.onmouseout = function() {
  modal.classList.remove('active');
  a_catalog.classList.remove('active');
}

#a_catalogue #myBtn {
  transition: absolute 0.3s ease-in-out, color 0.3s ease-in-out;
}

#a_catalogue.active #myBtn {
  position: absolute;
  z-index: 3;
  top: 0;
  color: white;
}

#a_catalogue {
  text-decoration: none;
}

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 740px;
  z-index: 1;
}

.modal {
  position: fixed;
  z-index: 2;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.modal.active {
  visibility: visible;
  opacity: 1;
}

<a href="/catalogue" id="a_catalogue">
  <p class="p4 menu_item" id="myBtn">
    Каталог
    <i class="fa fa-bars" aria-hidden="true" id="myBtn"></i>
  </p>
</a>
<div id="myModal" class="modal">
  <div class="modal-content" id="modal-content">
    <div class="row">
      <div class="col-lg-6">
        <h6>
          текст
        </h6>
        <hr class="modal_hr">
        <a href="/">
          <p class="p1_bold modal_a">
            сыллка
          </p>
        </a>
        <a href="/">
          <p class="p1_bold modal_a">
            сыллка
          </p>
        </a>
        <a href="/">
          <p class="p1_bold modal_a">
            сыллка
          </p>
        </a>
        <a href="/">
          <p class="p1_bold modal_a">
            сыллка
          </p>
        </a>
        <a href="/">
          <p class="p1_bold modal_a">
            сыллка
          </p>
        </a>
        <a href="/">
          <p class="p1_bold modal_a">
            сыллка
          </p>
        </a>
      </div>
    </div>
  </div>
</div>
</div>

$(function() {
  // В переменную $item записываем блоки для которых будем имитировать событие
  var $item = $('[data-target]');
  

  $("body").on("click", function(e) {
    // Когда происходит клик, проходим циклом
    // по всем отслеживаемым блокам
    // и сравниваем координаты крайних точек каждого
    // с координатами курсора
    for (var i = 0; i < $item.length; i++) {
      var left = $item.eq(i).offset().left;
      var right = left + $item.eq(i).width();
      var top = $item.eq(i).offset().top;
      var bottom = top + $item.eq(i).height();
      if (
        e.pageX >= left &&
        e.pageX <= right &&
        e.pageY >= top &&
        e.pageY <= bottom
      ) {
        // Если координаты курсора внутри
        // в пределах координат сравниваемого блока
        // то выполняем действие
        alert('Клик');
        // И выходим из цикла
        break;
      } 
    }
  });


});

body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.overlay {
  position: relative;
  z-index: 2;
  opacity: 0.5;
	background-color: rgb(143, 143, 143);
background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: 30px 30px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

button {
  width: 300px;
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button  data-target>клик</button>
<div class="overlay"></div>