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

我正在使用position属性将某个对话框固定在某个位置。我可以使jQuery对话框的位置独立于窗口大小吗？

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

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

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

来源

2011-12-13 ripper234

貌似对话框控件试图保持对话可见，并且在这个过程中你的首要设置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/

来源

2011-12-13 08:25:13

正是我需要的，谢谢！ – ripper234

在jquery-ui中打开此增强功能：http://bugs.jqueryui.com/ticket/7947 – ripper234

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

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

并阅读下面的链接，这也将是有益的。

resolution of screen

windows height and width

来源

2011-12-13 08:00:27

如果你正在使用CSS，你可以做到这一点：

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

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

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

它更好地使用CSS来达到此目的。只需打开对话框使用插件，其余的可以通过CSS来照顾。

希望这会有所帮助。

-Veno

来源

2011-12-13 08:07:03

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

回答

相关问题