Close Javascript-popup-window From Anywhere

February 22, 2024 Post a Comment

I'm trying to build a popup that can be closed from anywhere. On the Mainpage you have the option to open it. At any point while browsing the mainpage the user shall be able to clo

Solution 1:

There are three solutions I propose depending on what the problem actually is.

1) closepopup() does not work on other pages

If you need to close the popup from page B when it was opened from page A the following code will allow you to obtain a reference to the popup from page B and close it. Reference: Find window previously opened by window.open

PageA.html

<script>functionpopuponclick()
   {
      my_window = window.open("http://google.com", "mywindow","status=1,width=350,height=150");
   }

   functionclosepopup()
   {
      my_window.close ();
   }
</script><ahref="javascript:popuponclick()">Open window...</a></br><ahref="PageB.html">Go to Page B</a></body></html>

PageB.html

<html><body><script>functionclosepopup()
   {
      var popupPlayer= window.open('', 'mywindow', 'status=1,width=350,height=150') ;
      popupPlayer.focus();
      popupPlayer.close();
   }
</script><ahref="javascript:closepopup()">Close window...</a></br></body></html>

2) closepopup() does not work on the same page as window is opened

A global reference to my_window is needed so you would need to change the code like this:

var my_window; //global reference herefunctionpopuponclick()
       {
          my_window = window.open("", "mywindow","status=1,width=350,height=150");
       }

       functionclosepopup()
       {
          my_window.close ();
       }

3) Final third solution using frames

You separate your page into 1 frames (one which is 100%) and another that is 0%.

You add the window open/close code in the parent frame. Than you call the window control code via cross frame javascript commands.

Baca Juga

Frames HTML Containing Javascript

<html><head><title>My example</title><script>var my_window;

 functionpopuponclick()
   {
      my_window = window.open("", "mywindow","status=1,width=350,height=150");
   }

   functionclosepopup()
   {
      my_window.close ();
   }
</script></head><framesetcols="100%,0%"><framesrc="frame.html"/><frame/></frameset></html>

Internal Frame (frame.html) - calling parent Javascript

<html><body><ahref="javascript:parent.popuponclick()"> Open Window </a><br/><ahref="javascript:parent.closepopup()"> Close Window </a><br/><ahref="javascript:location.href=location.href"> Refresh Frame (and try again)</a><br/></body></html>

Solution 2:

If you are trying to close it from an iframe...

top.my_window.close();

I believe you need to go out a level since that variable is set on the parent window. Not in the iframe.

Solution 3:

If you just need the popup to be closed automatically when you leave the main page (as suggested in a comment), you just need to do the following:

$(window).unload(closepopup);

JavaScript General