javascript - jquery 对话框位置不起作用

Question

我无法将我的 jquery 对话框置于页面顶部。我已经尝试了我在网上看到的一切，但它就是不动。以下是我尝试过的一些方法:

$('#dlgChange').dialog({
    autoOpen: false,
    modal: true,
    width: '800',
    resizable: false,
    title: Details,
    position: {
        my: "left top",
        at: "left top",
        of: window,  //I also tried $('.right-container) - this is the full right side of my page
        collision: "none"
    }
});

$('#dlgChange').dialog({
    autoOpen: false,
    modal: true,
    width: '800',
    resizable: false,
    title: 'Details',
    position: 'top',
});

我尝试在对话框打开后调整位置:

$('#dlgChange').dialog('option', 'position', 'top');

没有将对话框移动到页面顶部。它始终位于中心。我需要将其向上移动，因为对话框的底部正在移出页面。我有 jquery-ui 版本 1.12.1 和 bootstrap 3.3.6。似乎导致问题的 css 是下面的粗线。

 .ui-dialog {    
            left: 50% !important;
            **top: 50% !important;**
            margin-left: -175px !important;
            margin-top: -175px !important;
            position: fixed;
        }

非常感谢任何帮助。谢谢你

Answer 1

你可以这样做:

var yourPosition = {
  my: "center top",
  at: "center top+50"
};
$(function() {
  $("#dlgChange").dialog({
    position: yourPosition,
  });
});

Online demo (jsFiddle)