Positioning jQuery dialog

Question

I want to position my jQuery dialog x-pixels away from the right border of the browser. Is this anyhow possible?

http://jqueryui.com/demos/dialog/

The position option doesn't seem to have that kind of setup, but is there any other way to do it?

Vullo

possible duplicate of jQuery UI dialog positioning – Erechtheus

Answer 1

If you make your dialog box's position:absolute, then its taken about of the regular page flow, and you can use the left and top property to place it anywhere on the page.

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

and define the myPosition css class as:

.myPosition {
    position: absolute;
    right: 200px; /* use a length or percentage */
}

You can set the top, left, right, and bottom properties for myPosition using either a length such as in pixels or percentage.

Anacoluthia

Don't forget that it will position it relative to the first parent element whose position is specified. If none are found, it is positioned relative to the body tag. Therefore, for a dialog like this, it's important to always append it to the body tag. – Mccombs

Answer 2

This keeps dialog div in fixed position

this works for me in IE FF chrome and safari

jQuery("#dialogDiv").dialog({
    autoOpen: false, 
    draggable: true,
    resizable: false,
    height: 'auto',
    width: 500,
    modal: false,
    open: function(event, ui) {
        $(event.target).parent().css('position', 'fixed');
        $(event.target).parent().css('top', '5px');
        $(event.target).parent().css('left', '10px');
    }

});

when you want dialog box open just call

$('#dialogDiv').dialog('open');

Fortress

+1 this worked better for me, because I need to be able to move the form around. Setting the position with a css class makes it frozen. – Grane

Answer 3

Most of these answers seemed to be workarounds to me, and I wanted to find the official jQuery way to do it. After reading through the .position() docs, I found that it can indeed be done in the initialization of the jQuery widget:

$("#dialog").dialog({
    title:title,
    position:{my:"right top",at:"right+100 top+100", of:"body"},
    width:width,
    height:height
})

Where the +100 is the distance from the right and top respectively

Antaeus

Answer 4

I understand the answer is already accepted but just in case if any one need more info: http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html

$(function() {
            $("#dialog").dialog({
                position: {
                    my: "right bottom",
                    at: "right bottom",
                    of: window
                }
            });
        });

Schoolfellow

Answer 5

with this code u can specify ur top and left position:

$('#select_bezeh_window').dialog({
    modal:true,
    resizable:false,
      draggable:false,
      width:40+'%',
      height:500 ,
      position:{
          using: function( pos ) {
                $( this ).css( "top", 10+'px' );
                $( this ).css( "left", 32+'%' );
          }
       }
 });

Petigny

Answer 6

look here: http://jqueryui.com/demos/dialog/#option-position

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');

Piranesi

Answer 7

This worked for me to display the dialog at the top-right corner with 10px offset: position: "right-10 top+10":

$( "#my-dialog" ).dialog({
    resizable: false,
    height:"auto",
    width:350,
    autoOpen: false,
    position: "right-10 top+10"
});

Estrange

Answer 8

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)
    });
}

Radicle