我可以使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對話框的位置獨立於窗口大小嗎？

回答

相關問題