Question

我正在使用position属性来修复某个位置的对话框。

$('#red').dialog({autoOpen: false, resizable: false, draggable: false, 
    height: 600, width:550, position: [10, 150]});

我发现如果浏览器窗口太小，对话框不会弹出（10,150），但会更高。

有没有办法确保它在绝对位置弹出而不管窗口大小？

Answer 1

看起来对话框小部件正在尝试保持对话框可见并覆盖过程中的position设置。您可以使用open事件来强制解决问题。对话框的结构（没有不相关的类等）是这样的：

<div class="ui-dialog">
    <div class="ui-dialog-titlebar"></div>
    <div id="red"></div>
</div>

所以你可以像这样使用open处理程序：

open: function(event, ui) {
    var $dialog  = $(event.target);
    var position = $dialog.dialog('option', 'position');
    $dialog.closest('.ui-dialog').css({
        left: position[0],
        top:  position[1]
    });
}

是的，它有点kludgy但它可以工作，我没有在API中看到任何东西，当对话框不适合可视区域时，你可以控制对话框的行为。

演示：http://jsfiddle.net/ambiguous/L9Deb/

Answer 2

 $(window).height();
 $(window).width();

使用jquery的上述属性。它会给你窗口大小，你可以根据它调整弹出窗口的位置。

并阅读以下链接，这也将有所帮助。

resolution of screen

windows height and width

Answer 3

如果您使用的是CSS，则可以通过以下方式实现：

#red{position: absolute; top: 150px; left: 10px;}

根据浏览器窗口定位渲染。

在你的代码中，首先需要使用$（this）.offset通过jquery获取偏移量。一旦有了偏移量，就可以在位置上分配偏移量+位置：[10,150] part。

最好将CSS用于此目的。只需使用插件打开对话框，其余的就可以通过css来处理。

希望这有帮助。

-Veno

我可以使jquery对话框的位置与窗口大小无关吗？

3 个答案: