How to set position for dialog created via JavaScript

Question

HTML:

<a href="www.google.com">Link</a>

JavaScript

$(document).ready(function() { 
    $(document.body).on('click',"a",function(event){ 
        if ($(this).hasClass('ui-dialog-titlebar-close')) return;
        event.preventDefault();        
        var data = '<div id="dialog" title="Basic dialog">';
            data += '<p>Hello.</p></div>';
        $(data).dialog();
    });  
});

I want to set a position for this dialog. I've tried changing $(data).dialog(); to $(data).dialog('option', 'position', [200,300]);, but it doesn't work. How can I set it?

jsFiddle: http://jsfiddle.net/fcTcf/

Answer 1

it should be:

$(data).dialog({
    position: [200, 300]
});

The syntax $(data).dialog('option', 'option-name', value) is used for changing an option of a dialog that has already been initialized. But if you want to specify options at initialization time, you do so using a option object as the argument to the widget.

Answer 2

There is a link to api documentation for the jQuery Dialog Widget and this jQuery position will help you if you want more granular control of the position.

Answer 3

You're using the selector incorrectly.

$(data) where $data is not a class or id, data is a string containing html.

Try $("#dialog").dialog(); And then you surely would be able to figure it out with the API-documentation.

Answer 4

$(document).ready(function() { 
    $(document.body).on('click',"a",function(event){ 
        if ($(this).hasClass('ui-dialog-titlebar-close')) return;
        event.preventDefault();        
        var data = '<div id="dialog" title="Basic dialog">';
            data += '<p>Hello.</p></div>';

        var options={
            position:[200,300]
        };

        $(data).dialog(options);
    });  
});

You can set 'option' like this