0

我是 javascript 新手，并试图在页面打开时打开一个简单的对话框，但它只是显示

对话框的文本就好像它是一个普通的段落，没有对话框。这是我的 index.html：

<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
  <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
  <script type='text/javascript' src='js/jquery.js'></script>
  <title>Welcome to Jetty-9</title>
  <style type="text/css" title="maincss">
    @import url(maincss.css);
  </style>
  <script type="text/javascript">
    $(function() {
      $("#dialog").dialog();
    });
  </script>
</head>
<body>

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

</body>
</html>

而我的 maincss.css 只是为 body 放置了一个背景图像，而 js/jquery.js 文件是 jquery 的最新版本，我通过加载页面，查看页面源代码，然后打开来确保它是正确链接的点击js文件

4

5 回答 5

1

您需要包含 jQuery UI 以利用该对话框。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

于 2013-07-01T18:21:46.343 回答
0

我假设您正在尝试使用jquery-ui 对话框，如果是这种情况，您需要包含jquery-ui文件

这些是来自 CDN 的最新版本

http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

如果需要，您可以选择不同的主题

于 2013-07-01T18:21:41.420 回答
0

您缺少 jQuery UI。head在您的页面中包含以下代码。

<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css' rel='stylesheet' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>

访问此处以获取各种版本的 jquery ui 及其主题的更多 CDN 链接。

于 2013-07-01T18:23:25.223 回答
0

您必须在 JQuery 主文件之后导入 JQuery UI 的 api

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

这种方式应该有效：

<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
  <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
  <script type='text/javascript' src='js/jquery.js'></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <title>Welcome to Jetty-9</title>
  <style type="text/css" title="maincss">
    @import url(maincss.css);
  </style>
  <script type="text/javascript">
    $(function() {
      $("#dialog").dialog();
    });
  </script>
</head>
<body>

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

</body>
</html>
于 2013-07-01T18:21:30.820 回答
0

您的代码看起来不错并且可以正常工作。我的猜测是您没有正确导入jQueryor jQuery UI。

参考 MaVRoSCy的评论进行了更新，看看这个fiddle，运行良好。

于 2013-07-01T18:24:33.073 回答