Wednesday, December 13, 2006

How to open a popup window using Javascript

<A href="<YOUR POP WINDOW>" onclick="OpenWindow(this.href);return false;">tell us online</A>

Rules:
-Provide the link in both onclick and the link's href attribute
-Instead of passing the url twice, one in href and one in onclick event, refer to the link's href attribute.
-Return false at the end of onclick method.

These rules enables us to update the link only in place. If the javascript is not supportted by the browser, users will be able to navigate by the link provided in the href attribute like a normal navigation.

Let's open a window with dynamic height. The height of the window will be calculated according to the screen resolution. Th width is 760. So we will center the window in the screen.

var popupWindow = null;
function OpenWindow(link)
{
if (popupWindow != null){
if(!popupWindow .closed)
popupWindow .close();
}

//Adjust the height according to the screen resolution
var height =800;
var left=20;
if (window.screen && window.screen.height && window.screen.width)
{
height = screen.height-70;
left = screen.width/2-380;
}
popupWindow =window.open (link, 'popupwindow','top=5,width=760,left=' + left + ',' + 'height=' + height + ',scrollbars,resizable');
popupWindow .focus();
}

No comments: