Jquery模态 - 外部css不起作用

Question

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>

  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script> 
  <script>
  $(function() {        
    $( "#dialog" ).dialog({
         width : 700,
         height : 370,
         modal: true   
    });

  });
  </script>
</head>
<body>
<div id="dialog" title="">
  <iframe frameborder="0" scrolling="no" width="670" height="310" href="www.google.com"></iframe>
</div>

</body>
</html>

我想在页面加载时显示弹出模式。 我正按照自己的意愿获得弹出窗口。 但问题是当我使用以下链接时，我正在获取弹出窗口。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

但是，我不想使用链接。 所以我下载文件并导入到我的项目中。 当我使用下载的CSS文件时，我没有在模态弹出窗口中获得“X”按钮。 请帮我解决一下这个。 谢谢。

。

Answer 1

http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css下载.png文件列表，如下所示，但如果你在项目中使用下载的.css，这些.png文件是没有下载，这就是“X”在对话框中不可用的原因。 您可以通过提琴手或任何其他网络流量捕获工具进行验证。 下载所有必需的图像并将其存储在具有相同文件夹层次结构（主题/基础/图像）的项目中。

http://code.jquery.com/ui/1.10.1/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png
http://code.jquery.com/ui/1.10.1/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png
http://code.jquery.com/ui/1.10.1/themes/base/images/ui-icons_222222_256x240.png
http://code.jquery.com/ui/1.10.1/themes/base/images/ui-bg_flat_75_ffffff_40x100.png

正如我在评论中提到的那样 - 你可以从这里下载整个jquery主题。

Answer 2

JQuery UI拥有图像，CSS和JavaScript文件。

在此处下载您的版本内容： http ： //jqueryui.com/download/

如果您不太关心CSS，可以在页面下方选择de“base”选项。 下载后，它会为您提供带有javascript，css和图像的zip。 尝试保持文件夹不变（例如，将文件解压缩到名为“jquery-ui”的文件夹中），这样图像和链接就能正常工作。

现在，您可以在自己的CSS中更改样式以实现所需的样式。