定位jQuery對話框

Question

我想將jQuery對話框放置在離瀏覽器右邊框x像素遠的位置。這無論如何可能嗎？

http://jqueryui.com/demos/dialog/

位置的選擇似乎並不具有這種設置的，但是否有任何其他的方式做到這一點？

Answer 1

如果你讓你的對話框的position:absolute，那麼它採取對普通頁面的流量，並且可以使用left和top屬性頁面上的任何地方放置。

$('.selector').dialog({ dialogClass: 'myPosition' }); 

並定義myPosition css類如：

.myPosition { 
    position: absolute; 
    right: 200px; /* use a length or percentage */ 
} 

可以設置top，left，right，和bottomproperties爲myPosition使用一個長度，例如以像素爲單位或百分比。

Answer 2

看這裏：http://jqueryui.com/demos/dialog/#option-position

初始化與指定的位置選項的對話框。

$('.selector').dialog({ position: 'top' }); 

在init之後獲取或設置position選項。

//getter 
var position = $('.selector').dialog('option', 'position'); 
//setter 
$('.selector').dialog('option', 'position', 'top'); 

Answer 3

這樣可以使對話格在固定的位置

這對我的作品在IE FF Chrome和Safari

jQuery("#dialogDiv").dialog({ 
    autoOpen: false, 
    draggable: true, 
    resizable: false, 
    height: 'auto', 
    width: 500, 
    modal: false, 
    open: function(event, ui) { 
     $(event.target).parent().css('position', 'fixed'); 
     $(event.target).parent().css('top', '5px'); 
     $(event.target).parent().css('left', '10px'); 
    } 

}); 

當你想關閉對話框

就叫

$('#dialogDiv').dialog('open'); 

Answer 4

這個工作對我用10px偏移量在右上角顯示對話框：position: "right-10 top+10"：

$("#my-dialog").dialog({ 
    resizable: false, 
    height:"auto", 
    width:350, 
    autoOpen: false, 
    position: "right-10 top+10" 
}); 

Answer 5

要解決的中心位置，我用：

open : function() { 
    var t = $(this).parent(), w = window; 
    t.offset({ 
     top: (w.height()/2) - (t.height()/2), 
     left: (w.width()/2) - (t.width()/2) 
    }); 
} 

Answer 6

據我所知，答案已經接受，但爲了以防萬一，如果任何人需要更多的信息： http://salman-w.blogspot.co.uk/2013/05/jquery-ui-dialog-examples.html

$(function() { 
      $("#dialog").dialog({ 
       position: { 
        my: "right bottom", 
        at: "right bottom", 
        of: window 
       } 
      }); 
     }); 

Answer 7

大部分答案似乎是我的解決方法，我想找到正式的jQuery方式來做到這一點。通過.position()文檔閱讀後，我發現，它的確可以在jQuery的小部件的初始化完成：

$("#dialog").dialog({ 
    title:title, 
    position:{my:"right top",at:"right+100 top+100", of:"body"}, 
    width:width, 
    height:height 
}) 

凡+100是從右側和頂部分別

Answer 8

與此代碼的距離你可以指定你的頂部和左側位置：

$('#select_bezeh_window').dialog({ 
    modal:true, 
    resizable:false, 
     draggable:false, 
     width:40+'%', 
     height:500 , 
     position:{ 
      using: function(pos) { 
       $(this).css("top", 10+'px'); 
       $(this).css("left", 32+'%'); 
      } 
     } 
});