POPUP when leaving page

A terrible pop up with bad UX for when a user tries leaving a page.

Mouse has to leave viewport for it to activate.
Only 1 popup per page session.

HTML:

<div class="popup on-exit">
  <div class="box">
    <h3 class="modal-title">OMG! THIS IS A TERRIBLE IDEA!</h3>
    <hr>
    <p>Why didn't you talk the dealer out of this!</p>
    <small class="d-block mb-3">Shame on you disclaimer!</small>
    <hr>
    <div class="popup-footer text-right">
      <button type="button" class=" btn close-popup">Close</button>
      <a href="#" class="btn">Shame Shame Shame</a>
    </div>
  </div>
</div>

JS:

var popupCounter = 0;
function addEvent(obj, evt, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(evt, fn, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('on' + evt, fn);
  }
}
addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    if (popupCounter < 1) {
      $('.popup.on-exit').fadeIn();
    }
    popupCounter++;
  }
});
$('button.close-popup').click(function() {
  $('.popup.on-exit').fadeOut();
});

CSS:

.popup.on-exit {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  .box {
    @include boxShadow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: $wrapper-bg;
    color: $body-color;
  }
  .close-popup {
    background-color: #666;
    @include hover-focus {
      background-color: darken(#666, 10);
    }
  }
  hr {
    border-color: $border-color;
  }
}