定位jQuery对话框

Question

我想将jQuery对话框x-pixels定位在远离浏览器右边界的位置.无论如何这可能吗？

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

位置选项似乎没有这种设置,但有没有其他方法可以做到这一点？

Answer 1

这使对话框div处于固定位置

这适用于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 2

如果您创建了对话框position:absolute,那么它将对常规页面流进行处理,您可以使用leftand top属性将其放在页面的任何位置.

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

并将myPosition css类定义为:

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

可以设置top,left,right,和bottom 属性用于myPosition使用一个长度,例如以像素为单位或百分比.

Answer 3

这些答案中的大多数对我来说似乎都是解决方法,我想找到官方的jQuery方法来做到这一点.通过阅读.position()文档后,我发现它确实可以在jQuery小部件的初始化中完成:

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

+100分别是右边和顶边的距离

Answer 4

我知道答案已经被接受，但以防万一，如果有人需要更多信息：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
                }
            });
        });