I.T. Discussion Community!
-Collapse +Expand
C#
Search C# Group:

Advanced
-Collapse +Expand C# To/From
To/FromCODEGuides
-Collapse +Expand C# Study Test
PRESTWOODCERTIFIED
-Collapse +Expand C# Store
PRESTWOODSTORE

Prestwood eMagazine

June Edition
Subscribe now! It's Free!
Enter your email:

   ► KBProgrammingC#WebForms Cod...   Print This     
Next Random Article Next Random Tidbit || Change Topic Random From All
  From the December 2015 Issue of Prestwood eMag
 
C# WebForms Coding Tasks:
How to open a URL in a pop-up window.
 
Posted 11 years ago on 2/9/2008 and updated 7/1/2009
Take Away: Every now and then you want a link to open not only in a new browser, but you may want to give the new window the appearance of a pop-up window. This ASP/Javascript method gives you a lot of control and is easy to figure out and implement.

KB100853



Note: if you just want the browser to open a page in another browser (or tab), 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.

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server" >

<script language="javascript">

function Pop(URL)

{

a=window.open(URL,
'MyWindow','status=0,toolbar=0,width=300,height=250');

a.focus();

return false;

}

</script>

</asp:Content>

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 href="" onclick="return Pop('htmlpage.htm')">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: we 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
resizableAllow/Disallow the user to resize the window.
scrollbars Enable the scrollbars if the document is bigger than the window
heightSpecifies 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.

onclick=: this is where we tell the link to call our function. We could have just said onclick = "Pop('hrmlpage.htm')" but as it turns out the onclick expects a return value.  If the returned value is true, then the link exectues it's 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 href="" onclick="Pop('htmlpage.htm'); return false;">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. 


Comments

1 Comments.
Share a thought or comment...
Comment 1 of 1

Thanks, Bryan, for posting such a useful article.  Your writing style is very understandable. Nice work!

Posted 10 years ago
 
Write a Comment...
...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.


Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P1183A1
Enter key:
KB Post Contributed By Bryan Valencia:

Bryan Valencia is the author of millions of lines of code and writes for PrestwoodBoards and Visual Studio Journey on-line magazines.

Visit Profile

 KB Article #100853 Counter
49502
Since 4/2/2008
Follow PrestwoodBoards on: 


©1995-2019 PrestwoodBoards  [Security & Privacy]
Professional IT Services: Coding | Websites | Computer Tech