Positioning dialog box at different part of the screen and changing the locations with event

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.

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Position of Dialog box using JQuery

Example :

Changing position after initialization of the dialog box.

Adding offset to location.

Subscribe

1

2

3

4