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.


plus2net.com



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







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

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