【问题标题】:jquery dialog position not workingjquery对话框位置不起作用
【发布时间】:2018-06-20 07:43:49
【问题描述】:

我无法将我的 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 和引导程序 3.3.6。似乎导致问题的 css 是下面的粗线。

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

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

【问题讨论】:

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


    【解决方案1】:

    你可以这样做:

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

    Online demo (jsFiddle)

    【讨论】:

    • 谢谢,但这并没有为我移动对话框。我在打开对话框后包含了您的代码,并且它保持在同一个位置。
    • @user2370664 我将jquery-ui.css 添加到我的小提琴中并再次测试它是否正常工作。我认为您还有另一个css 会导致此问题。你能在你的问题中添加小提琴吗?
    • 你完全正确。还有另一个导致问题的css。 jquery-ui.css 和 jquery-ui-all.css 都已加载。谢谢
    • @user2370664 请对我的回答进行投票以了解并帮助其他人,因为有些人只看到投票赞成的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多