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”按钮。请帮我解决一下这个。谢谢。

This is the one I am using the link

This is the one I am using external file

Answer 1

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

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

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

Answer 2

JQuery UI拥有图片，css和javascript文件。

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

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

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

Jquery模态 - 外部css不起作用

2 个答案: