jquery - 我可以使 jquery 对话框位置独立于窗口大小吗？

Question

我使用位置属性将对话框固定在某个位置。

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

我发现如果浏览器窗口太小，对话框不会在 (10, 150) 处弹出，而是更高。

有没有办法确保它在绝对位置弹出，无论窗口大小如何？

Answer 1

看起来对话框小部件正在尝试保持对话框可见并覆盖您在此过程中的位置设置。您可以使用 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]
    });
}

是的，这有点笨拙，但它确实有效，而且我在 API 中没有看到任何允许您在对话框不适合可视区域时控制对话框行为的内容。

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