Two JS Pop-ups On Same Page

JavaScript
1

Hello!
I have build popup that is working fine, I need use it twice (one on click and second on mousemove) on same page, but events are working only with first popup (second on mousemove popup cant be closed).
Ive googled some info, and I tried manipulate it with loop, but I cant get it work (Im new in JS)… can anyone help me to get it work ?
Thanks you

CODEPEN DEMO

// 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;
  
  var modal = document.getElementById("fl-pop-up__ab");
  
  if (mouseY < 50) {
    if (popupCounter < 1) {
      modal.classList.add("fl-pop-up__active");
    }
    popupCounter++;
  }
});
2

I did a fork with my aproach CodePen DEMO, basically i created a class to handle the diferents behaviour related with the modal and try to don’t repeat methods. Related when the user click outside of the window and display the second modal, i creacted a function showMouseOut to handle the mouseleave and display the second modal but this the same class. And finally i added into the css:
html, body { height: 100%; }
That is because i need the full size of the html tag.

1 Like
3

Thanks you yamitrvg12! you are cool!
It is working… (and I thought that I understand to JS little bite - haha).
I have only 3 issues with it:

  1. If I understand it well, your code is not classic JS, because IE9 produce syntax error on first line? I need to get it work fo IE9+, is it possible?
  2. Im using popups separately too… where should I add ‘if’ statement to get popups work alone too?
  3. Is it possible add function run mouseleave popup once time of visitor session, I mean it should work as abandoned notification, like: Are you sure you are leaving us? And popup should show up only on mouseY .

Thanks you very much!

5

Thank you @camperextraordinaire to transform or use the classical syntax, apart of that what do you think of my approach?
Thanks again for your comments :slight_smile:

6

Thanks you to both, I very appreciate your help.
… I’m completely out of this style of code :confused: , may I ask you to fix items 2 and 3 I asked before?
Thanks you