Question

我有一个搜索和替换的对话框。目前我使用下面的方法来重新调整窗口的位置。我需要保持窗口静止在屏幕上（用户拖动窗口的任何地方）而不移动它，或者将其重置回屏幕中间，这是jQuery("#dialog-form").dialog("option","position","center");当前所做的。

以下是documentation of jQuery dialog的示例。我想知道如何修改setter值以根据当前视口设置重新定位窗口。因此，当它在页面上自动滚动时，它将始终保持在当前视口的X和Y上。

//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", 'top' );

Answer 1

这就是我为滚动和调整大小所做的事情：

$(window)
        .resize(function() {
            $('body').css('height', $(this).height())
            $('#alertsWindow').dialog( "option", "position", ['left','bottom'] );
        })
        .scroll(function(){$(this).resize()});

它使对话框保持在角落里。（您可以使用您想要使用的任何位置）

从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).

Answer 2

你可以试试这个：

$(window).resize(function() {$(".selector").dialog("option", "position", ['center','top']);});

$(window).scroll(function() {$(".selector").dialog("option", "position", ['center','top']);});

Answer 3

我知道这个问题是旧的，但更好的解决方法是设置位置：修复包含的对话框元素。没有涉及代码，CSS将为您处理一切。在jQuery可调整大小的插件调整大小操作之后，您需要将位置重置为fixed，因为插件会选择位置CSS属性并将其设置为绝对值。

jQuery对话框，当前屏幕上的静态位置

3 个答案: