You can center your windows opened with the window.open method on the screen.
Both Internet Explorer and Mozilla DOM provide window screen object that has availWidth and availHeight properties to retrieves the width and height of the
working area of the system's screen. All you need to do is to get the difference between the screen width (or height) value and the window width (or height) value
and divide it by 2.


Since you might want to make this functionality reusable, you can create a wrapper
method to call window.open method by replacing its features argument that includes
attributes such as width and height. You can parse width and height attributes in the
features argument value, and find the appropriate left and top values to center the
window and append left and top attributes to the features argument value.


The features argument usually looks like the following:



'width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no
,status=yes,toolbars=no'

First, we need to create a method to parse the width and height values in the
features string. Since we might want to use this method for other purposes to split
name/value pairs such as parsing query strings to find query string values, let’s
make it a generic method.



function GetAttributeValue(attribList, attribName, firstDelim,secondDelim)
{
var attribNameLowerCase = attribName.toLowerCase();
if (attribList)
{
var attribArr = attribList.split(firstDelim);
for (var i = 0, loopCnt = attribArr.length; i < loopCnt; i++)
{
var nameValueArr = attribArr[i].split(secondDelim);
for (var j = 0, loopCnt2 = nameValueArr.length; j < loopCnt2;j++)
{
if (nameValueArr[0].toLowerCase().replace(/\s/g, '')==attribNameLowerCase && loopCnt2 > 1)
{
return nameValueArr[1];
}
}
}
}
}

This method takes three arguments: a name/value pair list, the attribute name to
retrieve its value, the first delimiter and the second delimiter. The first delimiter will be comma and the second delimiter will be equal sign in this case. The first delimiter would be ampersand and the second delimiter would be equal sign to parse query string variables.


Then define the methods to retrieve available screen width and height values.



function GetScreenWidth()
{
return window.screen.availWidth;
}
function GetScreenHeight()
{
return window.screen.availHeight;
}

We can now create our window.open wrapper method to center the window by using these methods.



function WindowOpenHelper(sURL, sName, sFeatures, centerWindow)
{
var windowLeft = '';
var windowTop = '';
if (centerWindow)
{
var windowWidth = GetAttributeValue(sFeatures, 'width', ',','=');
windowLeft = (typeof(windowWidth) != 'undefined') ? ',left=' +((GetScreenWidth() - windowWidth) / 2) : '';
var windowHeight = GetAttributeValue(sFeatures, 'height', ',','=');
windowTop = (typeof(windowHeight) != 'undefined') ? ',top=' +((GetScreenHeight() - windowHeight) / 2) : '';
}
window.open(sURL, sName, sFeatures + windowLeft + windowTop);
}

This method takes four arguments: URL of the document to display, the name of
the window, a list of feature items, and a Boolean to indicate whether the window
should be centered.


You can now call WindowOpenHelper method in your page.


JavaScript



function OpenWindowCentered(windowWidth, windowHeight)
{
WindowOpenHelper('http://www.karamasoft.com', 'WindowCentered','width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no,status=yes,toolbars=no', true);
}

ASPX



<asp:LinkButton ID="lbOpenWindowCentered" runat="server"
OnClientClick="OpenWindowCentered(); return false;">Open window
centered</asp:LinkButton>