Jquery对话框'X'图像未显示？一种答案

【问题标题】：Jquery dialogbox 'X' image not showing? aJquery对话框'X'图像未显示？一种
【发布时间】：2013-07-16 02:25:33
【问题描述】：

我在 asp.net MVC4 项目中使用 JQuery 1.9.1 和 JQuery UI 1.10.2。我已经从 NuGet Tool 下载了所有这些 JS 和 Css。我在框中缺少 JQuery 对话框“X”图像。如何在对话框中获得它？

项目文件夹结构如下。

Project
|
|-Content
|    |
|    |-Themes
|       |
|        |- Base
|            |
|            |-Images
|            |
|            JQuery.UI.* Files
|            ---
|            ----
|
|
|-Scripts
    |
   JQuery-1.9.1.JS All Files
   JQuery-UI-1.10.2.JS All Files

当我搜索 JQuery-UI-1.10.2.js 时，我发现下面的代码插入图像。

this.uiDialogTitlebarClose = $("<button></button>")
            .button({
                label: this.options.closeText,
                icons: {
                    primary: "ui-icon-closethick" //This Image
                },
                text: false
            })
            .addClass("ui-dialog-titlebar-close")
            .appendTo( this.uiDialogTitlebar );
        this._on( this.uiDialogTitlebarClose, {
            click: function( event ) {
                event.preventDefault();
                this.close( event );
            }
        });

我不知道图像文件在哪里。我只有以下来自 JQuery UI 的图像文件。

【问题讨论】：

获取萤火虫，看看它是否试图引用图像......如果是，那么看看它试图去什么路径等等......如果你有一个这个不起作用的在线示例我'我很乐意看看它。听起来这可能是一个简单的 CSS 问题。
@Paarth 如何在对话框中获得它？
在 CSS 中检查“ui-dialog-titlebar-close”类的图像是什么，顺便说一句，检查网络选项卡中图像的 404 错误
@James123 右键单击元素，如果这是您的问题...
@roasted 我做了，我发现像这样<button class="ui-dialog-titlebar-close"></button> .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 21px; margin: -10px 0 0 0; padding: 1px; height: 20px; } 并且 Networktab 中没有错误。

标签： jquery asp.net-mvc jquery-ui

【解决方案1】：

每当我遇到一个看起来像您所包含的对话框时，这是因为 jqueryUI css 文件未正确加载。您的 html 中有一行包含它，类似于

<link rel="stylesheet" href="themes/base/jquery-ui.css"></link>

对吗？

ui-icon-closethick 只是告诉 jqueryUI 在其ui-icons 图像上查看的位置，这是包含所有 173 个 jqueryUI 图标的单个图像。（您可以直接查看图像以获得想法，或者在 jqueryUI theme roller 上查看它 - 这实际上会向您显示对话框想要加载的图标集。）大多数图标通常来自内容颜色集，尽管它们也有用于选定、活动等的图标集。您可以检查您的 css 文件的 ui-icon 定义以准确了解引用了哪个图像集。

【讨论】：

【解决方案2】：

从此路径下载图片文件夹 https://github.com/jquery/jquery-ui/tree/master/themes/base/images 将该图像文件夹放在 css 文件夹中。确保名称正确。

【讨论】：

【解决方案3】：

发生这种情况的原因是，在您调用 jquery-ui 之后，您正在调用 bootstrap。

从字面上看，交换两者，而不是：

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

变成了

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

来源：https://stackoverflow.com/a/20457891/187025

【讨论】：

这对我有帮助，但关闭按钮图像位置并不完全位于关闭按钮上。为什么会出现这种行为？

【解决方案4】：

我知道这是一篇旧帖子，但是我遇到了这个问题，没有任何建议对我有用，所以我想我会分享我的 2 美分。

在检查对话框关闭按钮的 DOM 时，我意识到虽然图片下载正确，但按钮本身看起来像这样：

<button class="ui-dialog-titlebar-close" type="button"></button>

因此，它在由 jquery 生成后缺少 ui-icon 和 ui-icon-closethick 类。这显然是一个错误。但是，我对此的简单解决方案是在创建对话框后插入以下代码。

$('.ui-dialog-titlebar-close').addClass('ui-icon ui-icon-closethick');

这将导致按钮标记如下所示，并且图标正确显示。

<button class="ui-dialog-titlebar-close ui-icon ui-icon-closethick" type="button"></button>

我希望这对某人有所帮助。

【讨论】：