jQuery UI对话框 - 缺少关闭图标

Question

我正在使用自定义的jQuery 1.10.3主题。我直接从主题生成器下载了所有内容，并且有意没有更改任何内容。

我创建了一个对话框，但关闭按钮处显示为空白的灰色正方形：

我比较了在我的页面上生成的代码：

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

对于在Dialog演示页面生成的代码：

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

编辑

代码的不同部分是由jQueryUI生成的，而不是我自己生成的，因此我不能只是添加span标签，而需要编辑jqueryui js文件，这似乎是一种实现正常功能的不好/不必要的选择。

以下是用于生成该部分代码的JavaScript：

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

我感到困惑并需要帮助。

- Xion Dark

---

你检查过图标的图片文件是否存在于你的文件系统中了吗？ - Tiquelou

是的，图标图像表存在并且位于正确的位置。 - Xion Dark

Answer 1

我来晚了一些，但是现在我会给你带来一个惊喜，准备好了吗？

这种情况发生的原因是，您在调用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>

编辑 - 2015年6月26日 - 这篇回答一直吸引着读者在几个月后仍然关注，所以我觉得值得编辑一下。事实上， 我真的很喜欢在这个答案下面提供的noConflict解决方案，并且由用户Pretty Cool明确说明为单独的答案。 因为有些人报告说当脚本交换时，bootstrap提示框存在问题。但是我没有遇到过这个问题， 因为我下载jquery UI时没有下载提示框，因为我不需要它，因此这个问题从未出现过。

编辑-2015年7月22日-不要混淆jquery-ui和jquery！虽然Bootstrap的JavaScript要求先加载jQuery，但不依赖于jQuery-UI。 因此可以在加载bootstrap.min.js之后加载jquery-ui.js，而jquery.js总是需要在Bootstrap之前加载。

- David G

---

这解决了我的问题。我按照以下顺序包含资源：1）JQuery核心 2）bootstrap 3）JQueryUI。感谢你的帮助，迟到总比没有好！附言-你让我大吃一惊。 - Xion Dark

后面需要翻译的内容：Even later... Can you explain WHY bootstrap ordering has anything to do with it?稍晚一些... 你能解释为什么引导排序与此有关吗？ - AndyC

如果你交换顺序，使Bootstrap在Jquery UI之前，则Bootstrap的工具提示将无法正常工作。 - vee

尽管这不是一个好的解决方案，但我还是点赞了它，因为它提供了一种快速验证问题的方法。最终，我个人会使用Raul Riveros的解决方案，因为简单地交换这两个脚本会导致许多其他更大的问题。顺便说一句，当我看到它时，感到有些震惊。 - krowe

如果您不想改变Bootstrap和jQuery UI的顺序，您也可以通过以下方式修复按钮：$.fn.bootstrapBtn = $.fn.button.noConflict();。参考来源：https://dev59.com/2WAg5IYBdhLWcg3wlLui#23428433。 - l.poellabauer

Answer 2

这是对顶部回答的评论，但我认为它值得成为单独的回答，因为它帮助我解决了问题。

如果你想在 JQuery UI 之后继续使用 Bootstrap（我想这样做，因为我想使用 Bootstrap 工具提示），声明以下代码（我在 $(document).ready 后声明）将允许按钮再次出现（来自 https://dev59.com/2WAg5IYBdhLWcg3wlLui#23428433 的答案）

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

- Pretty Cool

---

这是一种相当流畅的做事方式，而不会对调用产生太多干扰。给它点赞。 - Aalok Mishra

干扰按钮类。 - Stefano Mtangoo

这个解决方案的问题在于，它会破坏你想要使用引导按钮功能（如button('loading')）的代码。为了确保现有的引导按钮功能仍然可用，请将所有引用引导“button()”函数调用的地方替换为“bootstrapBtn()”。（是的，我知道代码注释有点暗示了这一点，但我认为明确说明一下还是值得的。） - Kornél Regius

你的编辑器没有抱怨缺少分号吗？ - R. Schreurs

Answer 3

这似乎是jQuery发布方式中的一个错误。您可以在Dialog Open事件上手动使用一些dom操作来修复它:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});

- KyleMit

---

提醒未来读者，你可以扩展ui.dialog（链接），这样就不必在每次调用中重复使用此开放功能。请注意不要改变原意，保持内容通俗易懂，不需要解释。 - John MacIntyre

这个运行得相当不错。但是X比正常情况稍微向左移了一点……不确定原因是什么。 - ashlar64

很棒的解决方案！但在我的情况下，removeClass(...)是不必要的，并且导致对话框窗口左侧的 X 按钮错位。只需将 html() 方法链接到 find() 方法即可完成工作。谢谢。 - Aamir

太好了，我必须点赞给你。 - prem30488

Answer 4

我找到了三种解决方法：

1. 你可以先加载Bootstrap，然后再加载jQuery UI。但这不是一个好主意，因为你会在控制台看到错误。

2. 这个：

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;
   

   帮助了一些，但其他按钮看起来很糟糕。现在我们没有Bootstrap按钮了。

3. 我只想使用Bootstrap样式，还想要带有图标的关闭按钮。我已经做了以下工作：

   修复后的关闭按钮外观

.ui-dialog-titlebar-close {
    padding:0 !important;
}

.ui-dialog-titlebar-close:after {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    /* Change path to image*/
    background-image: url(themes/base/images/ui-icons_777777_256x240.png);
    background-position: -96px -128px;
    background-repeat: no-repeat;
}

- Eugene Charniauski

---

太好了！如果您没有图像文件或任何特定的主题安装，您可以在此处获取：http://jqueryui.com/themeroller。下载主题并选择您需要的组件（在本例中为对话框）。然后下载、提取、打开主题或图像文件夹，并将与您的主题匹配的图像文件复制到您的项目中。然后更改Yauheni在他的答案中提供的CSS引用。 - Exel Gamboa

你的第三点解决了我的问题。我只需要稍微调整宽度、高度和背景位置，就可以让按钮看起来像我想要的样子。谢谢。 - JGV

Answer 5

这在1.10版本中被报告为损坏。

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip于2013年1月29日上午7:36说：在CDN版本中，对话框关闭按钮丢失了。 只有button标签，缺少span ui-icon。

我下载了以前的版本，关闭按钮的X又出现了。

- Robert

---

我正在使用1.10.3版本，但至少现在我感觉不那么疯狂了。我选择暂时忽略它。谢谢。 - Xion Dark

我可以确认在1.10.3版本中仍然存在这个问题。 - Frug

1.12.1版本中出现了相同的问题。 - TetraDev

Answer 6

我遇到了完全相同的问题，也许你已经检查过了，但是只需将“images”文件夹放在jquery-ui.css相同的位置即可解决该问题。

- Juan Hernández

---

这实际上是解决了我的问题或者至少让我更清楚了解问题的答案。我有一个测试页面，引用了在线（即http://code.jquery.com/...）的jquery-ui.css副本，在这种情况下，“ X”显示出来了。然而在我的实际项目页面中，.css文件在本地css文件夹中，"X"并没有显示出来。将“images”文件夹复制到我的本地css文件夹中，与我的.css文件并列，问题就得到了解决。 - Dave Marley

Answer 7

我遇到了相同的问题，在阅读并尝试了以上所有建议后，我只是尝试手动替换这个图像（你可以在这里找到它）下载并保存在我的应用程序中的images文件夹中，然后将其替换在CSS中，问题解决！

下面是CSS代码：

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

- Raul Rivero

Answer 8

我知道这个问题很旧，但我刚刚在jquery-ui v1.12.0中遇到了这个问题。

简短回答： 确保您在jquery-ui.min.css的相同位置上有一个名为Images的文件夹。 Images文件夹必须包含使用jquery-ui的最新下载版本中找到的图像。

长回答： 我的问题是我正在使用gulp将所有CSS文件合并成单个文件。 当我这样做时，我更改了jquery-ui.min.css的位置。 对话框的CSS代码期望同一目录下有一个名为Images的文件夹，并且在此文件夹内它期望默认图标。 由于gulp没有将图像复制到新位置，因此没有显示x图标。

- Junior

Answer 9

即使在jQuery UI之后加载Bootstrap，我也能够使用以下方法解决：

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}

- idiglove

Answer 10

我正在使用jQuery UI 1.8.17，我也遇到了这个问题，此外，页面上还应用了其他css样式表，包括标题栏颜色。因此，为避免出现其他问题，我使用以下代码精确地定位了UI元素：

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

然后我在对话框本身的属性中添加了一个关闭按钮：

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

出于某些原因，我必须同时针对这两个项目进行操作，但它可以正常工作！

- James Drinkard