Question

我是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只是为身体添加了一个背景图片，而js / jquery.js文件是jquery的最新版本，我确保它通过加载页面来链接，查看页面源，然后点击它打开js文件

Answer 1

您需要包含jQuery UI才能利用对话框。

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

Answer 2

你必须在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>

Answer 3

我假设您尝试使用jquery-ui dialog，如果是这种情况，则需要包含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

如果需要，您可以选择其他主题

Answer 4

您缺少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>

访问 here ，了解各种版本的jquery ui＆amp; amp;的更多CDN链接。它的主题。

Answer 5

您的代码看起来很好并且正常运行。我的猜测是你没有正确导入jQuery或jQuery UI。

更新了 MaVRoSCy 评论，并查看此fiddle，效果良好。

加载页面时，jQuery对话框无法打开

5 个答案: