Utah WordPress Web Design » javascript http://www.brmecham.com Brian Mecham, Utah Web Designer, WordPress Theme Developer, WordPress Templates, CSS Ninja Thu, 22 Dec 2011 00:21:18 +0000 en hourly 1 http://wordpress.org/?v=3.3 How to Create a Simple Javascript popup window http://www.brmecham.com/how-to-create-a-simple-javascript-popup-window/ http://www.brmecham.com/how-to-create-a-simple-javascript-popup-window/#comments Wed, 12 May 2010 18:01:42 +0000 Brian Mecham http://www.brmecham.com/?p=120 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.

]]> http://www.brmecham.com/how-to-create-a-simple-javascript-popup-window/feed/ 0