jQuery UI dialog positioning

Question

I am trying to use the jQuery dialog UI library in order to position a dialog next to some text when it is hovered over   The jQuery dialog takes a position parameter which is measured from the top left corner of the current viewport  in other words   0  0  will always put it in the upper left hand corner of your browser window  regardless of where you are currently scrolled to    However  the only way I know to retrieve the location is of the element relative to the ENTIRE page   The following is what I have currently   position top is calculated to be something like 1200 or so  which puts the dialog well below the rest of the content on the page       mytext   mouseover function         position     this  position            dialog   dialog  option    position    position top  position left        How can I find the correct position   Thanks

User · Answer

Taking Jaymin s example a step further  I came up with this for positioning a jQuery ui-dialog element above the element you ve just clicked  think  speech bubble         myDialog   dialog   open     var myDialogX     this  position   left -   this  outerWidth    var myDialogY     this  position   top -     document  scrollTop         ui-dialog   outerHeight          myDialog   dialog   option    position    myDialogX  myDialogY       Note that I  open  the ui-dialog element before calculating the relative width and height offsets   This is because jQuery can t evaluate outerWidth   or outerHeight   without the ui-dialog element physically appearing in the page   Just be sure to set  modal  to false in your dialog options and you should be a-OK

User · Answer

myid   dialog  height  auto           width  auto           show   effect   fade   speed  1000           hide   effect   fade   speed  1000           open  function  event  ui                   myid   closest  div role  dialog     css  top 100 left 100

User · Answer

As an alternative  you could use the jQuery UI Position utility e g       mytext   mouseover function         var target     this           dialog   dialog  widget   position          my   left          at   right          of  target

User · Answer

Here is the code   how to position the jQuery UI dialog to center        var  about       about            about button   click function            about dialog            modal  true           title   About the calendar            width  600                    close  function                  about dialog  destroy                 about hide                         buttons                close   function                     about dialog  close                                      show            about dialog  option    position    center

User · Answer

I don t think the speech bubble is quite right   I tweaked it a bit so that it would work and the item opens right under the link   function PositionDialog link            myDialog   dialog  open        var myDialogX     link  position   left      var myDialogY     link  position   top     link  outerHeight            myDialog   dialog  option    position    myDialogX  myDialogY

User · Answer

You ca set top position in style for display on center   saw that the code    ui-dialog top  100px  important    This style should show dialog box 100px bellow from top

User · Answer

a bit late but you can do this now by using  j object  offset   left and  top accordingly

User · Answer

above solutions are very true   but the UI dialog does not retain the position after window is resized  below code does this                document  ready function                         test   click function                                var posX       test   offset   left -   document  scrollLeft         test   outerWidth                                var posY       test   offset   top -   document  scrollTop         test   outerHeight                                console log  in click function                                    abc   dialog                                   position  posX posY                                                                                             window  resize function                    var posX     test   offset   left -   document  scrollLeft         test   outerWidth                    var posY       test   offset   top -   document  scrollTop         test   outerHeight                     abc   dialog                                   position  posX posY

User · Answer

http   docs jquery com UI API 1 8 Dialog  Example for fixed dialog on the left top corner       dialogId   dialog       autoOpen  false      modal  false      draggable  false      height   auto       width   auto       resizable  false      position   0 28       create  function  event      event target  parent   css  position    fixed          open  function                   object   load                   dialogOpener   click function             dialogId   dialog  open

User · Answer

you can use   this  offset    position is related to the parent

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

After reading all replies  this finally worked for me       mytext   mouseover function         var x   jQuery this  position   left   jQuery this  outerWidth        var y   jQuery this  position   top - jQuery document  scrollTop        jQuery   dialog   dialog  option    position    x y

User · Answer

mytext   mouseover function        var width   250     var height   270     var posX     this  offset   left -   document  scrollLeft   - width     this  outerWidth       var posY     this  offset   top -   document  scrollTop       this  outerHeight           dialog   dialog  width width  height height  position  posX  posY         Positions a dialog just under an element  I used offset   function just because it calculates the position relative to upper left corner of the browser  but position   function calculates the position relative to parent div or iframe that parent of the element

User · Answer

Check your  lt  DOCTYPE html gt   I ve noticed that if you miss out the  lt  DOCTYPE html gt  from the top of your HTML file  the dialog is shown centred within the document content not within the window  even if you specify position    my   center   at   center   of  window   EG  http   jsfiddle net npbx4561  - Copy the content from the run window and remove the DocType  Save as HTML and run to see the problem

User · Answer

Check out some of the jQuery plugins for other implementations of a dialog   Cluetip appears to be a feature-rich tooltip dialog style plug-in   The 4th demo sounds similar to what you are trying to do  although I see that it doesn t have the precise positioning option that you re looking for

User · Answer

This page shows how to determine your scroll offset   jQuery may have similar functionality but I couldn t find it   Using the getScrollXY function shown on the page  you should be able to subtract the x and y coords from the  position   results

User · Answer

To put it right on top of control  you can use this code           dialog-edit   dialog                   position                 my   top               at   top               of      myControl

User · Answer

I ve tried all the proposed solutions but they won t work because the dialog is not part of the main document and will has its own layer  but thats my educated guess     Initialize the dialog with     dialog   dialog  option    position    top   Open it with   dialog  dialog  open    Then get the x and y of the displayed dialog  not any other node of the document    var xcoord     dialog  position   left   ADD MODIFIER FOR X HERE   var ycoord    dialog  position   top   ADD MODIFIER FOR Y HERE     dialog  dialog  option    position    xcoord   ycoord      This way the coordinates are from the dialog not from the document and the position is altered according to the layer of the dialog

User · Answer

instead of doing pure jquery  i would do       mytext   mouseover function         x    this  position   left - document scrollLeft     y    this  position   top - document scrollTop         dialog   dialog  option    position    y  x        if i am understanding your question correctly  the code you have is positioning the dialog as if the page had no scroll  but you want it to take the scroll into account  my code should do that

User · Answer

Thanks to some answers above  I experimented and ultimately found that all you need to do is edit the  position  attribute in the Modal Dialog s definition   position   middle  20     JQuery had no problems with the  middle  text for the horizontal  X  value and my dialog popped up in the middle  20px down from the top   I heart JQuery

User · Answer

I tried for many ways to get my dialog be centered on the page and saw that the code        dialog   dialog  option    position    top     never change the dialog position when this was created   Instead of  I change the selector level to get the entire dialog       dialog   parent    lt -- This is the parent object that the dialog   function create on the DOM  this is because the selector     dialog   does not apply the attributes  top  left   To center my dialog  I use the jQuery-Client-Centering-Plugin       dialog   parent   centerInClient

[jquery] jQuery UI dialog positioning

Examples related to jquery

Examples related to jquery-ui