6

我的 jQuery 对话框总是在浏览器窗口的左上角打开。

下面显示了我简化后的代码。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').click(function(event){
    $(function() {
        $('#dialog').dialog({
            autoOpen: false,
            width:500,
            height:500,
            position:'center'
        });
    });
    $('#dialog').dialog('open');
});
</script>
</body>
</html>

关于我需要做什么以使其在中心位置打开的任何想法？

4

5 回答 5

8

这极不可能是您的问题的原因，但我遇到了同样的问题，并在 jquery- ui.js中找到了这段代码：

// /1.10.0/jquery-ui.js:
target = $( options.of )
...
// line 12053 
if ( target[0].preventDefault ) {
    // force left top to allow flipping
    options.at = "left top";
}

那段代码检查目标元素是否定义了 preventDefault 函数。默认情况下，target[0] 将等于没有 preventDefault 的窗口对象。但是，就我而言，我在窗口对象的全局范围内定义了一个名为 preventDefault 的函数。我的 window.preventDefault 导致 if-block 评估为 true，从而覆盖了“center”的默认 options.at 值。

正如我所说，您定义函数window.preventDefault的可能性 很小，但这就是我的原因。

1 编辑：根据评论，实际上并不是那么不可能。很高兴我能帮助到每个人。

于 2013-02-14T15:45:39.730 回答
1

使用下一个对话框选项

$('#dialog').dialog({
            autoOpen: false,
            width:500,
            height:500,
            position:
            {
               my: "center",
               at: "center",
               of: window
             }
        });

JSFiddle 演示

于 2013-06-18T12:28:26.157 回答
1

用这个

<input id='submit' type="submit" value="Submit">
<div id='dialog'></div>
<script>
$('#submit').on('click', function(event){
    $(function() {
        $('#dialog').dialog({
            autoOpen: false,
            position:'center'
        });
    });
    $('#dialog').dialog('open');
});
</script>​

问候。

于 2013-01-02T21:55:25.200 回答
0

答案很简单，我们只需要添加 jquery 文件 jquery-1.11.1.js 就可以了

于 2014-05-22T16:31:12.457 回答
0

我遇到了一个问题，它会在 IE11 中居中，但在 IE7 上，即使有 position 属性，它也会位于左上角。

我正在使用 jqueryUI 1.11.2，它似乎对 IE7 和更早版本的支持在 1.8.2 或附近的某个地方被删除了。无论如何，解决方案是在我的值周围加上双引号，如下所示：

$('#dialog').dialog({
        autoOpen: false,
        modal: true,
        width: '200',
        title: 'Confirm Delete',
        position: {
            my: "center",
            at: "center",
            of: $("body"),
            within: $("body")
        },
        buttons: {
            'Delete': function () {
                $('#btnDeleteAll').click();
                $(this).dialog('close');
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });

我只是尝试了单引号，这些也有效。

于 2014-11-21T02:00:42.517 回答