jQuery ui 关闭按钮未显示,但可以正常工作

Posted

技术标签:

【中文标题】jQuery ui 关闭按钮未显示,但可以正常工作【英文标题】:jQuery ui close button is not shown but it works properly 【发布时间】:2017-12-08 22:02:51 【问题描述】:

我正在使用 jQuery-ui 对话框并添加了库:

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/jquery-ui.css">

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/tether.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-ui.js"></script>

但是当对话框出现时,你看不到关闭按钮X。

我可以这样看:

我在控制台出现这些错误:

加载资源失败:服务器响应状态为 404 (未找到)

【问题讨论】:

您需要下载错误中指定的图片。这意味着图像不存在于您的项目中 如果您使用 jquery ui,请下载完整包.. 我应该下载哪个主题才能有常规的蓝色关闭按钮? 试试这个,ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-darkness/… 请将解决方案发布为答案,而不是更新您的问题。这是为了避免混淆。谢谢。 【参考方案1】:

当您下载 Jquery UI zip 文件并解压缩时,会出现一个 images 文件夹。复制并粘贴到您的项目文件夹中。然后,它将完美地工作。

【讨论】:

【参考方案2】:

错误:

您的服务器上没有 3 个 png。

您可以在以下位置指向 pngs:

CDN

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_444444_256x240.png

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_555555_256x240.png

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_777777_256x240.png

下载它们并将它们放在您自己的服务器上。

在这两种情况下,您都可能需要更改 html 文件中 1. 样式表或 2. 内联 &lt;style&gt; 标记中的规则集:

    样式表: jquery-ui.css 行。要查找要编辑的特定行,请转到该错误日志并单击每个错误。您应该被重定向到 CSS 文件的浏览器视图,并找到您需要编辑的确切行。

    &lt;style&gt;...&lt;/style&gt;&lt;head&gt; 标记内。

【讨论】:

【参考方案3】:

图像文件不是原来的地方请下载插件所需的图像并重试下面的代码

  <link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/jquery-ui.css">

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/tether.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-ui.js"></script>

【讨论】:

以上是关于jQuery ui 关闭按钮未显示,但可以正常工作的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI 按钮 - 保持活动状态,忽略悬停状态

按钮将禁用,直到所有输入未被填满 无法正常工作

如何移动 jQuery UI 对话框上的关闭按钮?

导航项按钮未显示

导航图像在 jQuery 灯箱中未正确显示

jQuery - 选中/未选中复选框上的动态显示和隐藏按钮,反之亦然[关闭]