定位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+'%'); 
      } 
     } 
});