Position of a jquery UI dialog from top of DIV

Question

I use a jQuery UI 1.10.2 to display a dialog within a DIV. This container div has a dynamic ajax content.

Currently i center the dialog like this:

$( "#mydialog" ).dialog({position: my: "center center", at: "center center", of: "#mycontainer"}});

It works great, but if the container has a large height users need to scroll to see the dialog, so i would like to center my dialog horizontally, and display it at 75px from the top of the container.

If i understand correctly this "position" utility, according to jquery UI documentation we should be able to do this:

$( "#mydialog" ).dialog({position: my: "center center", at: "center top+75", of: "#mycontainer"}});

However it does not work, the dialog is stuck at the top of the container. Though if i use "top+25%" it works , see this js fiddle. Can i use a margin-top in pixels using "position" jquery utility for this dialog?

Thanks!

Answer 1

Finally i found out what's wrong: because of the first argument 'center center' the height of the dialog was removing the margin-top.

Here is the solution:

$( "#mydialog" ).dialog({ my: "center top", at: "center top+75", of: "#mycontainer"})

I updated the jsfiddle.