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

【问题标题】：Can I make jquery dialog position independent of window size?我可以使 jquery 对话框位置独立于窗口大小吗？
【发布时间】：2012-01-19 03:05:30
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案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]
    });
}

是的，它有点笨拙，但它可以工作，我在 API 中看不到任何允许您在对话框不适合可视区域时控制对话框行为的内容。

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

【讨论】：

【解决方案2】：

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

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

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

resolution of screen

windows height and width

【讨论】：

【解决方案3】：

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

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

css 定位根据浏览器窗口呈现。

在您的代码中，您首先需要使用 $(this).offset 通过 jquery 获取偏移量。一旦有了偏移量，就可以在 position: [10,150] 部分中分配偏移量+位置。

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

希望这会有所帮助。

-维诺

【讨论】：