How to Create a Simple Javascript popup window

javascript popup
Sometimes on your website you may want to open some content in a popup window rather than a new page, which allows the visitor to remain on the current page and view the new content.

Here’s how you do this…

Add the following javascript code to the header of your website (somewhere in between the <head> </head> tags)…

<script language="javascript" type="text/javascript">
<!-- POPUP WINDOW SCRIPT -->
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.availWidth)?Math.floor(Math.random()*(screen.availWidth-w)):50;TopPosition=(screen.availHeight)?Math.floor(Math.random()*((screen.availHeight-h)-75)):50;}
if(pos=="center"){LeftPosition=(screen.availWidth)?(screen.availWidth-w)/2:50;TopPosition=(screen.availHeight)?(screen.availHeight-h)/2:50;}
if(pos=="default"){LeftPosition=50;TopPosition=50}
else if((pos!="center" && pos!="random" && pos!="default") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}
function CloseNewWin(){if(win!=null && win.open)win.close()}
window.onfocus=CloseNewWin;
<!-- POPUP WINDOW SCRIPT -->
</script>

Now place the following code on your website, like a normal hyperlink but with some extra code. Edit this line according to the link you are wanting to open…

<a href="http://www.yoursite.com/awebpage.php" onClick="NewWindow(this.href,'TitleGoesHere','550','400','yes','center');return false" onFocus="this.blur()">OpenThisPage</a>

That’s it.

Tags: , ,

This entry was posted on Wednesday, May 12th, 2010 at 11:01 am and is filed under How To. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Comment