Position of Dialog box using JQuery

The position of displaying the dialog box we can define inside our script.
my :
left ,center , right (default center )
top, center , bottom
at :
left ,center , right (default center )
top, center , bottom
of :
window ( default ), target

Example :

$( "#my_dialog" ).dialog({
 autoOpen: false,
 position: { my: "right top", at: "right top", of: window }
The parameter my defines one of the four corners of the dialog box which is to be aligned to the screen at position defined by at parameter.
The parameter at defines location on the screen.

Note : All positions starts with Horizontal option and then vertical option.

Changing position after initialization of the dialog box.

There may be a situation where same dialog box can be positioned at different location in the screen based on the event or from script output. We will use option : Position to define the new locations.
$("#my_dialog").dialog("option", "position", { my: "right top", at: "right top", of: window} );
Here is an example script. Using this we can position a dialog box in any of the four corners of the screen or at center. By using target ( of ) option we can place dialog box just to the right of a button.

Adding offset to location.

We can position the dialog box little below the top of the screen.

Same way we can position in little away from right edge of the screen.


* indicates required
Subscribe to plus2net


    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer