定位 jQuery 对话框答案

【问题标题】：Positioning jQuery dialog定位 jQuery 对话框
【发布时间】：2011-01-05 23:19:53
【问题描述】：

我想将我的 jQuery 对话框定位在远离浏览器右边框的 x 像素处。这有可能吗？

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

位置选项好像没有那种设置，但是有没有其他办法呢？

【问题讨论】：

jQuery UI dialog positioning的可能重复

标签： jquery dialog css-position

【解决方案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');

【讨论】：

+1 这对我来说效果更好，因为我需要能够移动表单。使用 css 类设置位置使其冻结。

【解决方案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 properties。

【讨论】：

不要忘记它将相对于指定位置的第一个父元素定位它。如果没有找到，则相对于 body 标签定位。因此，对于这样的对话框，始终将其附加到正文标签很重要。

【解决方案3】：

这些答案中的大多数对我来说似乎都是解决方法，我想找到官方的 jQuery 方法来做到这一点。看了.position()的文档，发现在jQuery widget的初始化中确实可以做到：

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

其中+100分别是到右边和顶部的距离

【讨论】：

【解决方案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
                }
            });
        });

【讨论】：

【解决方案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+'%' );
          }
       }
 });

【讨论】：

【解决方案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');

【讨论】：

【解决方案7】：

这对我来说可以在右上角以 10px 偏移量显示对话框：position: "right-10 top+10":

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

【讨论】：

【解决方案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)
    });
}

【讨论】：