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

时间:2011-12-13 07:51:22

标签: jquery jquery-ui jquery-ui-dialog

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

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

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

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

3 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

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

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

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

resolution of screen

windows height and width

答案 2 :(得分:0)

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

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

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

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

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

希望这有帮助。

-Veno