Question

我试图通过css给出位置来改变jQuery对话框的位置。

但是当我在.css文件和＆amp;中应用更改时刷新页面，对话框没有出现在给定的位置。

请建议如何更改位置。

我在jquery-ui.css中尝试了这个css，但是没有用：

.ui-dialog{
    position:absolute;
    top:161px;
    left:842.5px;
}

Answer 1

您无需使用CSS选项来覆盖默认位置。

Jquery Dialog已经有了这个选项。

例如：

$("#dialog").dialog("widget").position({
   my: 'left',
   at: 'right',
   of: target
});

参考：http://jqueryui.com/position/

Answer 2

以下是我过去使用的一些代码。

var $dialogpopup = $( "#popupcommdiv" ).dialog({
                                                autoOpen: false,
                                                  height: 400,
                                                   width: 600,
                                                position: {my: "top middle",
                                                           at: "top middle",
                                                           of: "#header"},
                                                   title:"Message"});

Answer 3

使用position选项。

或者，如果您想申请另一个位置为absolute的班级，您可以使用dialogClass选项：

$("#yourDialog").dialog({
    dialogClass: 'myPosition'
});

Answer 4

如果您希望使用css更改位置：

.ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-front .ui-draggable .ui-resizableIn {
    position: absolute;
    height: auto;
    width: 300px;
    top: 21px;
    left: 147px;
    display: block;
}

也许只有.ui-dialog才能解决这个问题，请尝试一下。

Answer 5

检查您的.ui对话框，看看是否正在使用您应用的CSS。否则，请尝试在样式结尾处提供!important

.ui-dialog{
    position:absolute;             // not required important its already absolute
    top:161px !important;         // provide !important
    left:842.5px !important;       // provide !important
}

您还可以使用对话框的position属性提供您的职位。jQuery dialog position

Answer 6

我需要添加到已接受的答案中，如果您正在寻找某个元素中的某种类型的相对定位，那么这可能会帮助您更快地找到解决方案：

//Considering that you have instantiated a jquery-ui dialog with the following
$('#someDialog').dialog({position: {my: 'top', 
                                    at: 'left top', 
                                    of: '#content'}, 
                         appendTo: '#content'});

上面的代码说我们在 div 中创建了一个 id 为“content”的对话框。那么我们如何设置对话框相对于“#content”元素的位置？

//move the dialog to x = 200, y = 50 relative to #content
$('#someDialog').dialog({position: {my: 'left+200 top+50', 
                                    at: 'left top', 
                                    of: '#content'}, 
                         appendTo: '#content'});

上面的代码将相对于左侧和顶部 +200 像素和 +50 像素的内容定位对话框，位置元素需要与“at”参数 'left top' 相关联，否则将无法正常工作。它记录在文档中，但让它工作是另一回事，显然你可以用动态输入代替“我的”。我正在使用 dragstop 事件反馈到我的应用程序所在的对话框，然后稍后恢复对话框。

如何更改JQuery对话框的位置

6 个答案: