Question

我的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>

关于我需要做什么的任何想法，以便它打开位于中心？

Answer 1

高度 ₁这不太可能导致你的问题，但我遇到了同样的问题，并在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]将等于window对象，该对象没有preventDefault。但是，在我的例子中，我在window对象的全局范围中定义了一个名为preventDefault的函数。我的window.preventDefault导致if-block计算为true，从而覆盖了“center”的默认options.at值。

正如我所说，高度 ₁不太可能你已经定义了函数window.preventDefault，但这就是我的原因。

¹ 编辑： 根据评论，实际上并非不太可能。很高兴我能帮到每个人。

Answer 2

使用此

<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>

问候。

Answer 3

使用下一个对话框选项

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

JSFiddle DEMO

Answer 4

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

Answer 5

我遇到了一个问题，它会在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');
            }
        }
    });

我只是试过单引号而且那些也有用。

jQuery对话框始终打开左上角

5 个答案: