Question

编辑：重写为仅限html

在下面的代码中，为什么显示的jquery对话框不居中？单击页面上的“测试”按钮打开对话框。

<html>
<head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
    <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />

<script>
  function showDialog() {
    $("#dialog-modal").dialog({
        resizable: true,
        height: 140,
        modal: true,
        position: 'center',
        buttons: {
            'Yes': function () {
                $(this).dialog("close");
                return true;
            },
            'No': function () {
                $(this).dialog("close");
                return false;
            }
        }
    });
  }
</script>

</head>
<body>

<div style="width:800px; height:800px; border:solid 1px red;">

<div id="dialog-modal" title="Basic dialog"></div>

<input type="button" value="test" onclick="showDialog();"></input>

</div><!-- End demo -->


</body>

</html>

Answer 1

我已在http://jsfiddle.net/zjRga/1/重新创建了您的方案。我已经测试过几次了，我无法重现你的陈述。你能仔细检查一下吗？您能否确认我们您没有使用任何额外的CSS？

注意：我做了一些小的（非关键的）更改，以使其有效。

希望它有所帮助。

Answer 2

我通过添加以下内容解决了这个问题：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"
    type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js"
    type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/i18n/jquery-ui-i18n.min.js"
    type="text/javascript"></script>

jquery对话框没有居中

2 个答案: