positioning dialog

Question

I'm trying to position a dialog in jQuery and I have the following code. It doesn't seem to be doing what I expect it to do. I just need the dialog to either be centered or appear at the top left corner of my body.

Here is the code I have

    agreeDialog = $j('#termsOfAgreementConfirm').dialog({
                modal: true,
                autoOpen:false,
                resizable:false,
                width : 1000,
                height :400,
                stack:false,
                closeOnEscape:false,
                title:"Terms of Usage",
                open: function(event, ui) {

                    $j('.ui-dialog-titlebar-close').hide();

                },
                buttons: {

                    Disagree: function() {
                        disagree.dialog('open');
                        disagree.dialog('moveToTop');

                    },


                    Agree: function() {
                        $j(this).dialog('close');
                        $j.cookie("agree", "Y");
                        new Ajax.Request('/myballback/user/ajaxUpdateAgreementForUser',
                                {
                                    onSuccess:function(resp) {
                                    },
                                    onError: function(resp) {
                                        alert("Error:" + resp.toJSON());
                                        return;
                                    },
                                    asynchronous:true,
                                    evalScripts:true
                                });
                        $j(this).dialog('close');

                    }
                }
            });


var x = jQuery(agreeDialog).position().left + jQuery(agreeDialog).outerWidth();
            var y = jQuery(agreeDialog).position().top - jQuery(document).scrollTop();               //agreeDialog.dialog({width:width, height:height ,position:[posX, posY]});


            agreeDialog.dialog('option', 'position',[x, y]);

Answer 1

You can use the position property of the jQuery dialog to achieve this; something like:

$j('#termsOfAgreementConfirm').dialog({
    ...
    position: "center",
    ....
});

From the jQueryUI docs:

Specifies where the dialog should be displayed. Possible values:

1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.

2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])

3) an array containing x,y position string values (e.g. ['right','top'] for top right corner)

Answer 2

Why don't you try with:

$( ".selector" ).dialog( "option", "position", ['left','top'] );

or

$( ".selector" ).dialog( "option", "position", 'center' );