Closing many pop-up windows on unload

Here is my website : http://www.brute.adult. And here is the codepen : https://codepen.io/vaninoo/pen/GMbbEg.

As you can see on the website, when you click on links, many pop-ups appear. I've been trying to make them disappear on unload. Here's how the pop ups are called:

 $( "#title1" ).click(function() {
      popup1 = window.open("protein.html", "_blank","menubar=no,location=no,resizable=no,scrollbars=no,status=yes,top=0,left=500,width=500,height=500");

      setTimeout(function(){ 
           var popup2 = window.open("protein2.html", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=300,left=100,width=500,height=600");
      }, 500);

      setTimeout(function(){ 
           var popup3 = window.open("protein3.html", "_blank","toolbar=no,scrollbars=yes,resizable=yes,top=10,left=2000,width=400,height=700");
      }, 1000);

      setTimeout(function(){ 
           var popup4 = window.open("protein4.html", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=50,left=50,width=400,height=400");
      }, 1500);
 });

As you can see, some of them are delayed to create a rythm in the windows opening. And their var names are popup1, popup2, popup3, popup4 etc.

Now here are the solutions I've tried, with no success:

1) Closing them one by one, but for a reason I can't figure out, this will work only on popup1:

$(window).on('beforeunload', function() {
    if(popup1) {
        popup1.close();
    }
    else {}
});

$(window).on('beforeunload', function() {
    if(popup2) {
        popup2.close();
    }
    else {}
});

2) Trying to iterate them. I will get, by adding an alert, the names of popup1, popup2 etc. one by one, so the first part of the "while" works. But the "if" doesn't:

$(window).on('beforeunload', function() {
    var popup = "popup";
    var i = 0;

    while (i < 3) {
        namesofpopups = popup + i;
        i++;

        if(namesofpopups) {
            namesofpopups.close();
        }
    }
});

I've been on this for ages, I made it a lot more easy to understand on the codepen. If someone could help it would be immensely appreciated!

Thank you and sorry for the long post!

Solution

It's due to the scope of the popup reference variables. You've defined them all (except popup1) inside the click handler, so they are not accessible from the onbeforeunload event handler.

To fix this it would be better to push the references in to an array which you can loop through when the tab is unloaded, something like this:

var popups = [];

$("#title1").click(function() {
  popups.push(window.open("protein.html", "_blank", "menubar=no,location=no,resizable=no,scrollbars=no,status=yes,top=0,left=500,width=500,height=500"));

  setTimeout(function() {
    popups.push(window.open("protein2.html", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top=300,left=100,width=500,height=600"));
  }, 500);

  // other popups...
});

$(window).on('beforeunload', function() {
  popups.forEach(function(popup) {
    popup.close();
  });
});

With this being said, bombarding your users with popups is incredibly annoying. In fact, if you did it to me I'd purposefully not use your website. I'd suggest you look in to using modal popups within your page instead, if you really need the behaviour.