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.

Leave a Reply

Your email address will not be published. Required fields are marked *