ASP.NET How to open a URL in a pop-up window.

Note: if you just want the browser to open a page in another browser page, look up the target parameter of the a href tag.

If you just want to pop a quick message box, look up the javascript alert function.

This article demonstrates how to pop up a new browser window on the click of a hyperlink and load whatever page you want in a controlled browser window.

In the head portion of your page , put the following javascript function.

<script language="javascript">function Pop(URL){
  a=window.open(URL,'MyWindow','status=0,toolbar=0,width=300,height=250');
  a.focus();
  return false;} 
</script>

AJAX NOTE:this can be in the AJAX master page, or in the "Content1" head section of the content page, as I show here.)

Then create a link in the body of your article, like this:

<a onclick="return Pop('htmlpage.htm')" href="http://www.blogger.com/">Test the popup feature</a>

Here's the details of how this all works.

URL: Within the function: We pass in the URL to open from our call to the function. The URL can be any html, shtml, or aspx page.

window.open: Call this javascript function and give it a URL, a window name (the html name of the document) and the opening parameters. You can use the name parameter to control the number of popups. For instance, if we created 10 links all naming the same name (like "MyWindow"), then they will all load in the same pop-up window. If we create 10 links all naming different windows, then each hyperlink will sen the page to it's own named window.

Using the parameters in my example, the pop-up window will be a fixed size, and have no status bar or toolbars. Here is a more complete list of parameters:

status The status bar at the bottom of the window.
toolbar The standard browser toolbar, with buttons such as Back and Forward.
location The Location entry field where you enter the URL.
menubar The menu bar of the window
directories The standard browser directory buttons, such as What's New and What's Cool
resizable Allow/Disallow the user to resize the window.
scrollbars Enable the scrollbars if the document is bigger than the window
height Specifies the height of the window in pixels. (example: height='350')
width Specifies the width of the window in pixels.

a: Once Javascript creates the window, it assigns it to the Javascript object (in the example it's named "a").

a.focus(): If the user clicks the link on the main page again after the window was initially created, the main page may cover the pop up. This line says that whenever we pop or reload this window's URL, we'll set focus on it.

return false: It's a function. We're returning false. Bear with me, I'll explain why in a moment.

Now we'll look at the hyperlink. It's a nearly standard html construct with a few unfamiliar twists.

href="": This says to browse to noplace. We could have left this out, but then the link would not look like a link in the page. It would look like regular text. Normally passing in "" as the href would force a reload of the page we're already on, I'll show how to stop the page from reloading later.

onclick=: This is where we tell the link nto call our function. Now we could have just said onclick = "Pop('hrmlpage.htm')" but as it turns out the onclick event expects a return value. If that value is true, then the link exectues its default behavior and browses to the link in the href parameter, but if it recevices a false, it skips that part. We could have done this:

<a onclick="Pop('htmlpage.htm'); return false;" href="">Test the popup feature</a>

...and the reload of the main page would be suppressed. But in our case, since our function already returns a false (handy, huh?), we can use that value to tell onclick to stop the link from reloading. We need to tell the onclick call to accept the value of the function with the return keyword as shown in the original version of the html link.

Note that there is no reason the Pop function must be married to a hyperlink. It is possible (though annoying) to call it on page load, mouseover events, or any other browser event.