如何解决两个javascript弹出窗口冲突？

Question

我建立了一个简单的弹出窗口，它可以打开内联内容，它基于add和remove类。我想在同一页面上使用此弹出窗口两次，一次作为经典的onclick弹出窗口，第二次应该由mousemove触发（页面顶部）。 为此，我更改了弹出窗口ID，但无法解决一个冲突：打开鼠标移动弹出窗口时，无法将其关闭。

    // Pop-up
if (document.querySelector(".fl-pop-up")) {
  window.addEventListener("load", function() {
    var btn = document.getElementById("btn_fl-pop-up");
    var modal = document.getElementById("fl-pop-up__init");

    // Open if exist
    if (btn) {
      btn.onclick = function() {
        modal.classList.add("fl-pop-up__active");
      };
    }
    
    var modal__overlay = document.querySelector(".fl-pop-up__overlay");
    var close = document.querySelector(".fl-pop-up__overlay--close");

    // Close on close click
    close.onclick = function() {
        modal__overlay.classList.remove("fl-pop-up__active");
    };
    // Close on window click
    window.onclick = function(event) {
      if (event.target == modal__overlay) {
        modal__overlay.classList.remove("fl-pop-up__active");
      }
    };
    // Close on ESC
    document.onkeydown = function(evt) {
      evt = evt || window.event;
      if (evt.keyCode == 27) {
        modal__overlay.classList.remove("fl-pop-up__active");
      }
    };
  });
}

// Abandoning visitor
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;

document.addEventListener("mousemove", function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
  //    document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
  //});

  //jQuery(document).mouseleave(function () {
  var modal = document.getElementById("fl-pop-up__ab");
  //var modal = document.querySelector(".fl-ab-pop-up");

  if (mouseY < 50) {
    if (popupCounter < 1) {
      modal.classList.add("fl-pop-up__active");
    }
    popupCounter++;
  }
});

.more-link {
position: absolute;
  top: 50%;
  left: 45%;
}

/* FL POP UP */
    .fl-pop-up {
    position: relative;
    z-index: 1000000;  
  }
    
    .fl-pop-up__overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(23, 23, 23, 0.85);
    height: 100vh;
  }
.fl-pop-up__active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}  
  .fl-pop-up__overlay--pop-up {
    /*padding: 20px;*/
    background: #fff;
    width: 79%;
    height: 70vh;
    overflow: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
            box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  
  .fl-pop-up__overlay--close {
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    overflow: hidden;
    font-size: 34px;
    line-height: 1.1;
    text-align: center;
    z-index: 1050;
    color: rgb(210, 210, 210);
    background-color: rgb(22, 22, 23);
    width: 40px;
    height: 40px;
    padding: 10px;
    display: block;
    background-position: 10px center;
  }
  .fl-pop-up__overlay--close:hover {
    color: #fff;
  }

    <div id="btn_fl-pop-up" class="btn_fl-pop-up more-link">Open POP UP 1 - onclick</div>

<!--Onclick - POP UP 1-->
<div class="fl-pop-up">
<div id="fl-pop-up__init" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
  <div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; the padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 1 (click)</h1>
</div>
</div>
</div>
</div>
</div>


<!--Mousemove - POP UP 2-->
<div class="fl-pop-up">
<div id="fl-pop-up__ab" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
  <div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 2 (mousemove)</h1>
</div>
</div>
</div>
</div>
</div>

谢谢