jQuery UI dialog box not positioned center screen

Question

I have a jQuery dialog box that is meant to position in the middle of the screen  However  it seems slightly off-center vertically        Here is the code       add box   dialog       autoOpen  true      width  300      modal  true      resizable  false      bgiframe true       Any ideas why this won t center

User · Answer

I had to add this to the top of my HTML file   lt  doctype html gt    I did not need to set the position property   This is with jQuery 3 2 1   In 1 7 1  that was not needed

User · Answer

For me jquery dimensions js was the Culprit

User · Answer

Are you adding jquery ui position js to your page   I had the same problem  checked the source code here and realized I didn t add that js to my page  after that   dialog magically centered

User · Answer

dlg   dialog       title   My Dialog       left   parseInt jQuery window  width   -1200  2      top  parseInt jQuery window  height   -720  2      width  1200      height  720      closed  false      cache  false      modal  true      toolbar   dlg-toolbar

User · Answer

I was facing the same issue of having the dialog not opening centered and scrolling my page to the top   The tag that I m using to open the dialog is an anchor tag     lt a href     gt View More lt  a gt    The pound symbol was causing the issue for me   All I did was modify the href in the anchor like so     lt a href  javascript     gt View More lt  a gt     Now my page is happy and centering the dialogs

User · Answer

You must add the declaration    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

I was upgrading a legacy instance of jQuery UI and found that there was an extension to the dialog widget and it was simply using  center  instead of the position object  Implementing the position object or removing the parameter entirely worked for me  because center is the default

User · Answer

To fix this issue I made sure my body height was set to 100    body   height 100      This also maintains the center position while the user scrolls

User · Answer

1   The jQuery dialog centers in whatever element you put it in     Without more information  my guess is that you have a body div with a margin or something of the like  Move the popup div to the body level  and you ll be good to go   2   If you dynamically add content to the div as you load it  centering will NOT be correct  Do NOT display the div until you have the data your e putting in it

User · Answer

This issue is often related to opening the dialog via an anchor tag   lt a href     id  openButton  gt Open lt  a gt   and not preventing the default browser behaviour in the handler e g       openButton   click function event       event preventDefault         open dialog code          This usually removes the need for any positioning   scrolling plugins

User · Answer

Simply add below CSS line in same page    ui-dialog    position fixed

User · Answer

to position the dialog in the center of the screen        my-selector   parent   position                       my   center                       at   center                       of  window

User · Answer

None of the above solutions worked for me  I will present below my scenario and the final solution  just in case someone has the same problem  Scenario  I use a custom jQuery plugin to add a scroll bar to an HTML element that is located inside the Dialog box  I used it as   response  dialog    create  function  event  ui         quot  content-topp quot   mCustomScrollbar             The solution was to move it from create to open  like this    response  dialog    open  function  event  ui         quot  content-topp quot   mCustomScrollbar        this  dialog  option    position    center             So  if you use any custom jQuery plugin that manipulates the content then call it using the open event

User · Answer

I had the same problem  which was fixed when I entered a height for the dialog       dialog   dialog       height  500      width  800

User · Answer

If your viewport gets scrolled after the dialog displays  it will no longer be centered   It s possible to unintentionally cause the viewport to scroll by adding removing content from the page   You can recenter the dialog window during scroll resize events by calling      my-selector   dialog  option    position    center

User · Answer

This is how I solved the issue  I added this open function of the dialog     open  function                          ui-dialog   css  top   0px                                                            This now opens the dialog at the top of the screen  no matter where the page is scrolled to and in all browsers

User · Answer

dialog   dialog          autoOpen  false          height   auto           width   auto           modal  true           my   center            at   center            of  window      This solution does work but only because of the newer jQuery versions ignoring this completely and falling back to the default  which is exactly this  So you can just remove position   center  from your options if you just want the pop up to be centered

User · Answer

None of the above solutions seemed to work for me since my code is dynamically generating two containting divs and within that an un-cached image   My solution was as follows   Please note the  load  call on img  and the  close  parameter in the dialog call    var div   jQuery   lt div  lt  div                       attr  id   previewImage                       appendTo  body                      hide    var div2   jQuery   lt div  lt  div                       css                         maxWidth  parseInt jQuery window  width     80     px                          maxHeight  parseInt jQuery window  height     80     px                          overflow   auto                                          appendTo div   var img   jQuery   lt img                       attr   src   url                      appendTo div2                     load function                           div dialog                              modal   true                              width    auto                              close  function                                    div remove

User · Answer

Digging up an old grave here but for new Google searchers   You can maintain the position of the model window when the users scrolls by adding this event to your dialog  This will change it from absolutely positioned to fixed  No need to monitor scrolling events   open  function event  ui          this  parent   css  position    fixed

User · Answer

I was having the same problem  It ended up being the jquery dimensions js plugin  If I removed it  everything worked fine  I included it because of another plugin that required it  however I found out from the link here that dimensions was included in the jQuery core quite a while ago  http   api jquery com category dimensions   You should be ok simply getting rid of the dimensions plugin

User · Answer

Add this to your dialog declaration my   quot center quot   at   quot center quot   of  window  Example      quot  dialog quot   dialog          autoOpen  false          height   quot auto quot           width   quot auto quot           modal  true          position                my   quot center quot               at   quot center quot               of  window

User · Answer

My Scenario  I had to scroll down on page to open dialog on a button click  due to window scroll the dialog was not opening vertically center to window  it was going out of view-port   As Ken has mentioned above   after you have set your modal content execute below statement      selector   dialog  option    position    center      If content is pre-loaded before modal opens just execute this in open event   else manipulate DOM in open event and then execute statement        selector    dialog   open  function  event  ui       Do DOM manipulation if needed before executing below statement   this  dialog  option    position    center            It worked well for me and the best thing is that you don t include any other plugin or library for it to work

User · Answer

Just solved the same problem  the issue was that i did not imported some js files  like widget js

[jquery] jQuery UI dialog box not positioned center screen

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

Examples related to position