How can I position my jQuery dialog to center

Question

I have tried following code  but it only positions dialogs left upper corner position to center  and that makes element to be aligned to right  How can I center dialog to real center which counts elements width  so that center line will cut dialog to 50  50  halfs       selector   dialog   position   center        http   docs jquery com UI Dialog option-position

User · Answer

If you are using individual jquery files or a custom jquery download either way make sure you also have  jquery ui position js added to  your page

User · Answer

Could not get IE9 to center the dialog    Fixed it by adding this to the css    ui-dialog       left 1       right 1       Percent doesn t matter  Any small number worked

User · Answer

Because the dialog need a position  You need to include the js position   lt script src  jquery ui position js  gt  lt  script gt

User · Answer

Jquery UI 1 9 2  jquery  and the later versions don  support IE8   I found two solutions for that     Rollback to jquery UI 1 7 2 to support IE8  Try this code with Jquery UI 1 9 2    position   my   center    at   center   of     body   within     body

User · Answer

Try this        window  resize function             dialog   dialog  option    position    center

User · Answer

To fix center position  I use   open   function         var t     this  parent    w   window      t offset           top   w height     2  -  t height     2           left   w width     2  -  t width     2

User · Answer

Following position parameter worked for me  position    my   right bottom   at   center center   of  window      Good luck

User · Answer

I m getting best results to put jQuery dialog in the center of browser s window with   position    my   center bottom   at   center center   of  window      There s probably more accurate way to position it with option  using  as described in the documentation at http   api jqueryui com position  but I m in a hurry

User · Answer

Are you running into this in IE only  If so  try adding this to the FIRST line of your page s HEAD tag    lt meta http-equiv  X-UA-Compatible  content  IE 7    gt    I had though that all compatibility issues were fixed in later jQueries  but I ran into this one today

User · Answer

I have to call function dialog   twice to position the dialog  jQuery v1 11 2   jQueryUI v1 10 4        myDialog   dialog          initial dialog parameters       dialog       position            my   center center           at   center center           of  window

User · Answer

So if anyone hits this page like I did  or for when I forget in 15 minutes  I m using jqueryui dialog version 1 10 1 and jquery 1 9 1 with ie8 in an iframe blah   and it needs a within specified or it doesn t work  i e   position     my   center bottom    at   center top    of      submitbutton     within      content       Thanks to  vm370 for pointing me in the right direction

User · Answer

According to the following discussion  the problem could be due to less IE compatibility in the newer jQuery versions  reverting back to 1 7 2 seems to resolve the problem  which only occurs in IE8  http   forum jquery com topic jquery-ui-dialog-positioning-not-working-in-ie-8

User · Answer

I m pretty sure you shouldn t need to set a position       dialog   dialog      should center by default   I did have a look at the article  and also checked what it says on the official jquery-ui site about positioning a dialog   and in it were discussed 2 states of  initialise and after initialise   Code examples -  taken from jQuery UI 2009-12-03   Initialize a dialog with the position option specified       selector   dialog   position   top        Get or set the position option  after init     getter var position       selector   dialog  option    position      setter     selector   dialog  option    position    top      I think that if you were to remove the position attribute you would find it centers by itself else try the second setter option where you define 3 elements of  option   position  and  center

User · Answer

open  function           var win     window          this  parent   css           position   absolute           left   win width   -   this  parent   outerWidth      2          top   win height   -   this  parent   outerHeight      2

User · Answer

You also need to do manual re-centering if using jquery ui on mobile devices - the dialog is manually positioned via a  left  amp  top  css property   if the user switches orientation  the positioning is no longer centered  and must be adapted   re-centered afterwards

User · Answer

Another thing that can give you hell with JQuery Dialog positioning  especially for documents larger than the browser view port - you must add the declaration   lt  DOCTYPE html gt    At the top of your document   Without it  jquery tends to put the dialog on the bottom of the page and errors may occur when trying to drag it

User · Answer

The latest jQuery UI has a position component       myDialog   position      my   center      at   center      of  window       Doc  http   jqueryui com demos position  Get  http   jqueryui com download

User · Answer

Try this for older versions and somebody who don t want to use position       dialog-div-id   dialog  position    center    top

User · Answer

I fixed with css     ui-dialog  ui-dialog-content     width  975px important    height  685px important    position  fixed    top  5     left  50     margin 0 0 0 -488px

User · Answer

I had a problem with this and I finally figured this out   Until today I was using a really old version of jQuery  version 1 8 2   Everywhere where I had used dialog I had initialised it with the following position option     dialog       position   center        However  I found that removing position   center  or replacing it with the correct syntax didn t do the trick  for example     dialog       position           my   center          at   center          of  window             Although the above is correct  I was also using option to set the position as center when I loaded the page  in the old way  like so      The wrong old way of keeping a dialog centered passwordDialogInstance dialog  option    position    center      This was causing all of my dialog windows to stick to the top left of the view port   I had to replace all instances of this with the correct new syntax below   passwordDialogInstance dialog       option        position          my   center   at   center   of  window

User · Answer

For Win7 IE9 environment just set in your css file    ui-dialog      top  100px     left  350px  important

[jquery] How can I position my jQuery dialog to center?

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

Examples related to jquery-dialog