April 9, 2011 by Anchit Pandey

https://www.electronicgurudev.in/technology/heya-friends-do-you-want-popup-windows/

Heya Friends, Do you want Popup windows on your blog or websites. If yes then I guess you reached at the right place in this post I will share how to use Popup windows in your blog/websites. Popup windows are new browser windows opened from a web page. The popups are opened programmatically using JavaScript.

Popup windows were over used and exploited by many websites during the earlier days of the web. This resulted in the later versions of browsers blocking popup windows (and there were popup blocker plugins ). Eventually, popup windows became almost extinct now. Automatically opening popup windows is considered a very bad practice
.

Popups are still used for opening help page or displaying form submission results. However these popups require user action to open (rather than automatic ).

Invocation methods

The invocation of the Popup is dependent on the purpose of the Popup window. A help popup window could be opened when the user clicks on a ‘help’ link.

Based on the invocation method, Popups are of the following types:

Open on entering a page
Open on entering a page; but keep inactive ( also known as Pop Under)
Open on exiting a page
Open when the user clicks on a link or a button

Creating a JavaScript Popup window

In order to invoke the popup window at certain instances (like when the page is loading) you need to understand the event handling. For example, if you want to popup a window when the user visits a page, you need to handle the onLoad event of that page. The following section event handling.

The code below handles the onLoad event and displays a message.

<body onLoad=”javascript: alert(‘On Load event fired!’)”>

The event handler is added in the onLoad event of the <body> tag of the page.

Similarly, the following code shows the handler for the unload event.

<body onUnload=”javascript: alert(‘Unload event fired!’)”>

Suppose you want to handle the event when the user clicks on a link. The following code shows handling the click on an anchor

<a href=”javascript: alert(‘Clicked on link!’)”>Click here!</a>

Close Popup with Using the window.close method

It may be needed that you need to give a close link in the popup you created. The window.close () method could be used to close a window.

READ : iOS 5 Let Multiple Apps Simultaneously Download

However, there are certain security restrictions for using the close() method.

The close method closes only windows opened by JavaScript using the open method. If you attempt to close any other window, a confirm message is displayed, asking the user to choose whether the window is to be closed or not.

If you have the reference to a window, you can use the reference to the window to close.
For example:

popup_window = window.open(“”);

…..

popup_window.close ();

You can close the current window using self.close ();
For example:

<a href=”self.close ()”>Close this Window</a>

Sample Code for window.close()

<html>

<head>

   <title>JavaScript Window Close Example </title>

</head>

<script type=”text/javascript”>

   function popuponclick()

   {

      my_window = window.open(“”,

       “mywindow”,”status=1,width=350,height=150″);

      my_window.document.write(‘<h1>The Popup Window</h1>’);

   }

   function closepopup()

   {

      if(false == my_window.closed)

      {

         my_window.close ();

      }

      else

      {

         alert(‘Window already closed!’);

      }

   }

</script>

<body>

   <p>

      <a href=”javascript: popuponclick()”>Open Popup Window</a>

   </p>

   <p>

      <a href=”javascript: closepopup()”>Close the Popup Window</a>

   </p>

</body>

</html>

See the code above in work in the Link below.

function popuponclick()
{
my_window = window.open(“”,
“mywindow”,”status=1,width=350,height=150″);

my_window.document.write(‘

The Popup Window

‘);
}

function closepopup()
{
if(false == my_window.closed)
{
my_window.close ();
}
else
{
alert(‘Window already closed!’);
}
}

Open Popup Window

Close the Popup Window

JS Popup Windows

Invocation methods

Creating a JavaScript Popup window

Close Popup with Using the window.close method

Sample Code for window.close()

The Popup Window

More from my site