Positioning a div or dialog in the center of the window

Question

I use this following code to put the dialog in the center of the window.

var dialog = $('#dialogBox'); var windowHeight = $(window).height(); var windowWidth = $(window).width(); var dHeight = $('#dialogBox').height(); var dWidth = $('#dialogBox').width(); $('#dialogBox').css({top:windowHeight/2 - dHeight/2, left:windowWidth/2 - dWidth/2}).show(); 

Puts the div in the center of the window. But I want to put the dialogue in the center of the current visible area. This way, the dialog will be centered in the window, even if I scroll down or scroll up. How to do this using jquery?

Any suggestions would be appreciated !!!

Thanks.

Answer 1

You can make it death-centered as follows:

 $('#elementID').css({ position:'absolute', top:'50%', left:'50%', width:'600px', // adjust width height:'300px', // adjust height zIndex:1000, marginTop:'-150px' // half of height marginLeft:'-300px' // half of width }); 

Note that the item will appear in the center, but it will not move when scrolling. If you want it to appear in the center, you need to set position to fixed . However, this will not work in IE6. So your decision :)

---

You can also create a quick simple jQuery plugin:

 (function($){ $.fn.centerIt = function(settings){ var opts = $.extend({}, $.fn.centerIt.defaults, settings); return this.each(function(settings){ var options = $.extend({}, opts, $(this).data()); var $this = $(this); $this.css({ position:options.position, top:'50%', left:'50%', width:options.width, // adjust width height:options.height, // adjust height zIndex:1000, marginTop:parseInt((options.height / 2), 10) + 'px' // half of height marginLeft:parseInt((options.width / 2), 10) + 'px' // half of height }); }); } // plugin defaults - added as a property on our plugin function $.fn.centerIt.defaults = { width: '600px', height: '600px', position:'absolute' } })(jQuery); 

And later use it like:

 $('#elementId').centerIt({width:'400px', height:'200px'}); 

Answer 2

What you want is to change the position of the CSS attribute: position: fixed

Not sure if it works in IE, it was not in versions 7 older. This will keep this dialog in the same position relative to the window, even if you scroll.

Answer 3

Here is a very easy function to center the element on the screen. The only thing I did not include is z-index, but it can be easily added.

 $.fn.centerToWindow = function() { var obj = $(this); var obj_width = $(this).outerWidth(true); var obj_height = $(this).outerHeight(true); var window_width = window.innerWidth ? window.innerWidth : $(window).width(); var window_height = window.innerHeight ? window.innerHeight : $(window).height(); obj.css({ "position" : "fixed", "top" : ((window_height / 2) - (obj_height / 2))+"px", "left" : ((window_width / 2) - (obj_width / 2))+"px" }); } 

Answer 4

Not sure if this help, but jQuery UI has a pretty nice conversational ability with centering capability. Perhaps you should consider using them instead of writing your own.

see http://jqueryui.com/demos/dialog/