I've tried a million solutions and none seem to work. I just need to push my jQuery dialog box about 50px from the top of the page. Any ideas how?

function message() {
    $("#message").dialog({
      title: 'Title here',
      draggable:false,
      minHeight:100,
      resizable: false  
    });
 }

I've tried a million solutions and none seem to work. I just need to push my jQuery dialog box about 50px from the top of the page. Any ideas how?

function message() {
    $("#message").dialog({
      title: 'Title here',
      draggable:false,
      minHeight:100,
      resizable: false  
    });
 }

• javascript
• jquery

Share Improve this question Follow asked Mar 30, 2013 at 7:52 user1661548user1661548

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

There's a position parameter for that, it accepts an array with X and Y coordinates :

function message() {
    var myPos = [ $(window).width() / 2, 50 ];

    $("#message").dialog({
      title: 'Title here',
      draggable:false,
      minHeight:100,
      position: myPos,
      resizable: false  
    });
}

FIDDLE

Like adeneo mentioned, dialog has a position option which accepts a few data types, including jQuery-UI's fancy position object.

Given all the options, I think the cleanest and clearest way to specify the position you want is like this:

var myPos = { my: "center top", at: "center top+50", of: window };

Try it in jsFiddle

Have you tried this? css code .myPosition

.myPosition {
    position: absolute;
    top: 20px;
}

and jquery

$('.selector').dialog({ dialogClass: 'myPosition' });