Question

我在尝试将jquery对话框居中时遇到问题。运行这段代码后，对话框将出现在浏览器窗口的左上角。我也尝试使用onclick javascript事件执行代码，因此没有“加载”问题。我看一下有关同一问题的“stackoverflow”的一些现有问题，但没有一个对我有用。

有什么问题？一定是简单的事情。

谢谢

<!DOCTYPE HTML>
<html>
<head>
<!--My jQuery library code location -->
<script src="/jQuery/jquery-1.7.2.js"></script>
<script src="/jQuery/js/jquery.ui.widget.js"></script>
<script src="/jQuery/js/jquery.ui.dialog.js"></script>
<script src="/jQuery/js/jquery.ui.core.js"></script>
<script src="/jQuery/js/jquery.ui.mouse.js"></script>
<script src="/jQuery/js/jquery.ui.draggable.js"></script>
<script src="/jQuery/js/jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="/jQuery/css/base/jquery.ui.all.css">

<script type="text/javascript" >
$(document).ready(function(){
  $("#span-msg").empty().append("Message");
  $("#div-err-msg").dialog({
    modal: true,
    title: "Testing",
    position: "centre"
  });
});
</script>
<body>

<div id="div-err-msg" style="display:none;">
<span id="span-msg"></span>
</div>

</body>
</head>
</html>

您应该能够复制并粘贴上面的代码进行复制，只需将jquery src指向环境中的正确位置

Answer 1

我认为你有错字，应该是：position: "center"

Answer 2

替换

position: "centre"

与

position: "center"

这绝对有用。

Answer 3

首先，您关闭HEAD代码的位置不正确。

在您的代码中，存在拼写错误："centre"应为"center"。

试试这个：

 $("#div-err-msg").dialog({
    modal: true,
    title: "Testing",
    position: "center"
  });

默认情况下，它始终是窗口的中心，您无需提供UI对话的position：

Default : { my: "center", at: "center", of: window }

Positioning of a UI-dialog

尝试此代码（不带选项位置）：

$("#div-err-msg").dialog({
    modal: true,
    title: "Testing"
});

Working Fiddle

注意：尝试这些更改并让我知道它是否正常工作。

Answer 4

您的头标记需要在bode标记之前关闭。

然后从代码中删除所有不需要的js参考文件。添加以下代码。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

的JQuery：

 $("#LinkId").click(function () {
        $("#div-err-msg").dialog({
            title: "Dialog box",
            height: 300,
            modal: true  
        });
  });

演示：

http://jsfiddle.net/8bNRp/1/

Jquery对话框不居中

4 个答案: