jquery对话框位置不起作用

时间:2018-01-11 03:15:27

标签: javascript jquery css twitter-bootstrap jquery-ui

我无法将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;
        }

非常感谢任何帮助。谢谢

1 个答案:

答案 0 :(得分:0)

你可以这样做:

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

Online demo (jsFiddle)