I am developing a sales page for one of my clients & have a jQuery popup with CSS modal. The problem that I'm having with the code that I'm using is that in Google Chrome, when the user hovers off of the browser, even at the bottom or sides of the screen, the popup keeps coming back when it's only supposed to come back when hovering near the tab exit at the top of the page. I'm trying to get it to where the jQuery can detect when the user actually navigates toward the tabs "X" (exit). Would be nice if the popup only came 1 time as well instead of repeating.

Here's the CSS code that I'm using:

2. .pop-outer{
3.   background-color: rgba(0, 0, 0, 0.5);
4.   position: fixed;
5.   top:0;
6.   left:0;
7.   width:100%;
8.   height:100%;
9.   display:none;
10.   z-index:100;
11. }
12. 
    
13. .pop-inner{
14.   background-color:green;
15.   width:400px;
16.   height:680px; 
17.   border:3px solid yellow;
18.   border-radius:8px;
19.   margin: 2% auto;
20.   padding:5px;
21.   margin-top:40px;
22.   z-index:100;
23. }

Here's the jQuery code that I currently have:

2. $(document).ready(function() {
4. // Exit intent
5. function addEvent(obj, evt, fn) {
6.     if (obj.addEventListener) {
7.         obj.addEventListener(evt, fn, false);
8.     }
9.     else if (obj.attachEvent) {
10.         obj.attachEvent("on" + evt, fn);
11.     }
12. }
13. 
    
14. // Exit intent trigger
15. addEvent(document, 'mouseout', function(evt) {
16. 
    
17.     if (evt.toElement == null && evt.relatedTarget == null ) {
18.         $('.pop-outer').fadeIn();
19.     };
20. 
    
21. });
22. 
    
23. // Closing the Popup Box
24. $('a.close').click(function(){
25.     $('.pop-inner').fadeIn();
26.    });
27. });