jQuery dialog, static position on current screen
I have a dialog that is a search and replace. Currently I开发者_JAVA技巧 use a method like below to readjust the position of the window. I need to keep the window static on the screen while (wherever the user has dragged the window to) without moving it around, or resetting it back to the middle of the screen, which is what jQuery("#dialog-form").dialog("option","position","center");
currently does.
Below is a sample from the documentation of jQuery dialog. I'm wondering how I should modify the setter value to reposition the window based on the current viewport settings. So when it auto scrolls on the page it will always remain at X and Y on the current viewport.
//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", 'top' );
You could try this:
$(window).resize(function() {$(".selector").dialog("option", "position", ['center','top']);});
$(window).scroll(function() {$(".selector").dialog("option", "position", ['center','top']);});
This is what I do for scroll and resize:
$(window)
.resize(function() {
$('body').css('height', $(this).height())
$('#alertsWindow').dialog( "option", "position", ['left','bottom'] );
})
.scroll(function(){$(this).resize()});
It keeps the dialog in the corner. (You can use any position you want to use)
Right from the jQuery UI page on dialogs:
position String, Array Default:'center'
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).
I know this question is old, but a much better fix is to set position: fixed on the containing dialog element. No code involved, CSS will take care of everything for you. You will need to reset the position to fixed after a resizing operation by the jQuery resizable plug-in, because the plug-in co-opts the position CSS attribute and sets it to absolute.
精彩评论