Ravindar, Biztalk Developer and Administrator

Just another BizTalk blog

How to place the pop up div in center of screen

See the below code. you just need to place the name of the div in place ‘layer1’

var scrolledX, scrolledY;
    if (self.pageYoffset) {
        scrolledX = self.pageXoffset;
        scrolledY = self.pageYoffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        scrolledX = document.documentElement.scrollLeft;
        scrolledY = document.documentElement.scrollTop;
    } else if (document.body) {
        scrolledX = document.body.scrollLeft;
        scrolledY = document.body.scrollTop;

    // Next, determine the coordinates of the center of browser’s window

    var centerX, centerY;
    if (self.innerHeight) {
        centerX = self.innerWidth;
        centerY = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        centerX = document.documentElement.clientWidth;
        centerY = document.documentElement.clientHeight;
    } else if (document.body) {
        centerX = document.body.clientWidth;
        centerY = document.body.clientHeight;

    // Xwidth is the width of the div, Yheight is the height of the
    // div passed as arguments to the function:
    var leftoffset = scrolledX + (centerX – document.getElementById(‘layer1’).offsetWidth) / 2;
    var topoffset = scrolledY + (centerY – document.getElementById(‘layer1’).offsetHeight) / 2;
    // The initial width and height of the div can be set in the
    // style sheet with display:none; divid is passed as an argument to // the function
    var o = document.getElementById(‘layer1’);
    var r = o.style;
    r.position = ‘absolute’;
    r.top = topoffset + ‘px’;
    r.left = leftoffset + ‘px’;
    r.display = “block”;


June 28, 2010 - Posted by | Asp.Net, css etc

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: