jQuery UI对话框 – 缺lessclosures图标

我正在使用自定义的jQuery 1.10.3主题。 我从主题滚轮下载了每一个笔直的内容，而且我故意没有改变任何东西。

我创build一个对话框，我得到一个空的灰色广场，closures图标应该是：

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

<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 Demo页面上生成的代码：

 <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文件，这似乎是一个坏/不必要的select，以实现正常的function。

以下是用于生成代码部分的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); } } }); 

我不知所措，需要帮助。 提前致谢。

Answer 1

我迟到了一会儿，但我会打搅你的头脑，准备好了吗？

之所以发生这种情况，是因为你在调用jquery-ui之后调用了bootstrap。

字面上，交换两个，而不是：

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

它成为了

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

🙂

编辑 – 26/06/2015 – 这几个月后不断吸引利益，所以我认为这是值得的编辑。 其实我真的很喜欢这个答案下的评论中提供的noConflict解决scheme，用户Pretty Cool作为单独的答案进行了说明。 正如有些人在交换脚本时报告了引导工具提示的问题。 我没有遇到这个问题，因为我没有工具提示下载jQuery UI，因为我不需要它，因为bootstrap。 所以这个问题从未出现过。

编辑 – 22/07/2015 – 不要混淆jquery-ui和jquery ！ 虽然Bootstrap的JavaScript需要先加载jQuery，但它并不依赖于jQuery-UI。 所以jquery-ui.js可以在bootstrap.min.js之后加载，而jquery.js总是需要在Bootstrap之前加载。

Answer 2

这是对顶部答案的评论，但我觉得这是值得自己的答案，因为它帮助我回答了这个问题。

如果你想在JQuery UI之后声明Bootstrap（因为我想使用Bootstrap工具提示），声明如下（我在$(document).ready之后声明）会允许button再次出现（ https： //stackoverflow.com/a/23428433/4660870 ）

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

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>"); } }); 

Answer 4

这被报告在1.10中被破坏

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

phillip于2013年1月29日上午7:36说：在CDN版本，对话框closuresbutton丢失。 只有button标签，跨越UI图标是missong。

我下载了以前的版本，closuresbutton的X显示备份。

Answer 5

我有同样的确切问题，也许你已经cheger这个，但得到解决只是将“图像”文件夹放在与jquery-ui.css相同的位置

Answer 6

我发现了三个修复：

1. 你可以先加载靴子。 他们加载jquery-ui。 但这不是个好主意。 因为你会在控制台中看到错误。

2. 这个：

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

   帮助。 但其他button看起来很糟糕。 而现在我们没有引导button。

3. 我只是想使用靴子的风格，也想用图标closuresbutton。 我做了以下：

   修复后如何closuresbutton

    .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/basehttp://img.dovov.comui-icons_777777_256x240.png); background-position: -96px -128px; background-repeat: no-repeat; } 

Answer 7

我被卡住了相同的问题，并阅读并尝试以上所有build议后，我只是试图手动replace这个图像（你可以在这里find它）在CSS下载并保存在我的应用程序和voilá图像文件夹后，问题解决了！

这里是CSS：

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

Answer 8

我使用的是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(); 

然后，我在对话框本身的属性中添加了一个closuresbutton：…

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

出于某种原因，我不得不瞄准这两个项目，但它的作品！

Answer 9

作为参考，这就是我如何根据@ john-macintyre的build议扩展开放方法：

 $.widget( "ui.dialog", $.ui.dialog, { open: function() { $(this.uiDialogTitlebarClose) .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>"); // Invoke the parent widget's open(). return this._super(); } }); 

Answer 10

  just add in css .ui-icon-closethick{ margin-top: -8px!important; margin-left: -8px!important; 

}

Answer 11

聪明人曾经帮助过我。

在文件夹...\css所在的文件jquery-ui.css ，创build一个文件夹“images”并将其复制到它的文件中：

UI的icons_444444_256x240.png

UI的icons_555555_256x240.png

UI的icons_777620_256x240.png

UI的icons_777777_256x240.png

UI的icons_cc0000_256x240.png

UI的icons_ffffff_256x240.png

并出现closures图标。

Answer 12

我知道这个问题是古老的，但我只是有这个问题与jquery-ui v1.12.0。

简短的回答确保你有一个名为Images的文件夹在相同的地方，你有jquery-ui.min.css 。 images文件夹必须包含新鲜下载的jquery-ui的图像

长答案

我的问题是，我正在使用gulp将我所有的css文件合并成一个文件。 当我这样做时，我正在改变jquery-ui.min.css的位置。 该对话框的CSS代码需要在同一目录中名为Images的文件夹，并且在此文件夹内，它需要默认图标。 因为gulp没有将图像复制到新的目的地，所以没有显示x图标。

Answer 13

只需添加在缺less的：

 <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span> <span class="ui-button-text">close</span> 

Answer 14

我也有这个问题。 这是为closuresbutton插入的代码：

当我closuresbutton上的style =“display：none：”时，出现closuresbutton。 所以出于某种原因显示：无; 已经设定好了，我看不出如何控制。 所以解决这个问题的另一种方法可能是简单地覆盖显示：无。 虽然没有看到如何做到这一点。

我注意到由KyleMit发布的答案确实有效，但是做了一个不同的Xbutton。

我还注意到，这个问题不会影响我的网页上的所有对话框，但只是其中的一部分。 一些对话按预期工作; 其他没有标题（即，包含标题的范围是空的），而closuresbutton存在。

我在想事情是严重错误的，可能不是1.10.x的时候。

但经过进一步的工作，我发现在某些情况下，标题没有得到适当的设置，修复后，Xclosuresbutton应该重新出现。

我曾经设置这样的标题：

 ('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid); 

该代码不存在于我的代码中，但显然由jquery从ac-popup和ui-dialog-title创build。 一种kludge。 但正如我所说，不再有效，我必须使用以下代替：

 $('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid); 

这样做后，失踪的button问题似乎更好，虽然我不知道，如果他们肯定是相关的。