定位jQuery对话框

Question

我想让我的jQuery对话框距离浏览器右边框有x像素的间隔。 有可能吗？ http://jqueryui.com/demos/dialog/ 位置选项似乎没有这种设置，但还有其他方法可以实现吗？

- miro

---

可能是 jQuery UI对话框定位 的重复问题。 - bummi

Answer 1

这将使对话框div保持固定位置

在IE、Firefox、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');

- user583576

---

+1 这对我来说效果更好，因为我需要能够移动表单。使用 CSS 类设置位置会使其固定不动。 - Nathan

Answer 2

如果您将对话框的position:absolute，那么它会脱离常规页面流程，并且您可以使用left和top属性将其放置在页面上的任何位置。

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

并将myPosition CSS类定义为：

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

您可以使用像素或百分比等长度单位来设置myPosition的top、left、right和bottom 属性。

- Anurag

---

不要忘记，它会相对于第一个指定了位置的父元素进行定位。如果找不到任何父元素，则相对于body标签进行定位。因此，对于这样的对话框，将其始终附加到body标签非常重要。 - Ryan Joy

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是距离右侧和顶部的距离

- user3413723

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
                }
            });
        });

- Sanjay Zalke

Answer 5

使用此代码，您可以指定顶部和左侧位置：

$('#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+'%' );
          }
       }
 });

- sasan mohammadi

Answer 6

请看这里：http://jqueryui.com/demos/dialog/#option-position

使用指定的位置选项初始化对话框。

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

获取或设置初始化后的位置选项。

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

- dfens

Answer 7

这对我很有用，可以在右上角显示带有10px偏移量的对话框：position: "right-10 top+10"：

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

- Victor

Answer 8

为了修复中心位置，我使用以下代码：

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

- Eduardo Cuomo