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

我使用一个自定义的jQuery 1.10.3主题。我下载了每一个直接从主题辊，我故意没有改变任何东西。

我创建了一个对话框，我得到了一个空白的灰色正方形，关闭图标应该是: Screen shot of missing close icon

.

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

<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>

到对话演示页面上生成的代码:

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

我不知所措，需要帮助。

139759 次浏览
小开

只需要加上缺失的部分:

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

这在1.10中被打破

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

phillip在2013年1月29日上午7:36说:在CDN版本中，该 对话框关闭按钮缺失。只有按钮标签，span

我下载了以前的版本，关闭按钮的X显示了回来。

小开
我使用jQuery UI 1.8.17和我有同样的问题，加上我有额外的css样式表被应用到页面上的东西，包括 titlebar颜色。所以为了避免任何其他问题，我使用下面的代码来定位准确的ui元素:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();
然后我在对话框本身的属性中添加了一个关闭按钮: …< / p > 
modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

出于某种原因，我必须同时瞄准这两种道具，但它确实有效!

小开

这似乎是jQuery发布方式中的一个bug。你可以通过对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>");
}
});
小开
最佳答案

我迟到了一段时间，但我要让你大吃一惊，准备好了吗?

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

从字面上看，交换这两个，这样就不是:

<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>

：）

编辑- 26/06/2015 -这持续吸引了几个月后的兴趣，所以我 我觉得值得编辑一下。我真的很喜欢noConflict 解决方案提供在下面的评论这个答案和澄清 用户Pretty Cool给出了单独的答案。正如一些人报道的那样 在脚本交换时使用引导工具提示。我没有 但是我下载jquery UI时没有遇到这个问题 工具提示，因为我不需要它，因为引导。所以这个问题从来没有

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

小开

我也有这个问题。下面是为关闭按钮插入的代码:

从Web开发人员显示jquery创建的代码

当我关闭按钮上的style="display:none:"时，就会出现关闭按钮。所以出于某种原因，显示:没有;已经准备好了，我不知道怎么控制它。因此，解决这个问题的另一种方法可能是简单地重写显示:none。但我不知道该怎么做。

我注意到KyleMit发布的答案确实有效，但使X按钮看起来不同。

我还注意到，这个问题并不会影响我页面上的所有对话框，只会影响一部分对话框。一些对话框按预期工作;其他的没有标题(即，包含标题的span是空的)，而关闭按钮是存在的。

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

但经过进一步的工作，我发现在某些情况下，标题设置不正确，在修复这个问题后，X关闭按钮重新出现。

我曾经这样设置标题:

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

id不存在于我的代码，但显然是由jquery从ac-popup和ui-dialog-title创建的。有点拼凑。但正如我所说的那样，这已经行不通了，我不得不使用以下方法:

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

这样做之后，丢失按钮的问题似乎有所好转，尽管我不确定它们是否一定相关。

小开

我有同样的问题，也许你已经检查了这一点，但它解决了只是通过放置“图像”文件夹在相同的位置作为jquery-ui.css

小开

我遇到了同样的问题，在阅读和尝试上面所有的建议后，我只是试图手动替换这张图像(你可以找到它在这里)在CSS下载后，并保存在我的应用程序和voilá的图像文件夹中，问题解决了!

下面是CSS:

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

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

. 
$.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();
}
});

小开

这是对上面答案的评论，但我觉得它值得有一个单独的答案，因为它帮助我回答了这个问题。

如果你想在JQuery UI之后声明Bootstrap(我这样做是因为我想使用Bootstrap工具提示)，声明以下内容(我在$(document).ready之后声明)将允许按钮再次出现(答案来自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
小开 
  just add in css
.ui-icon-closethick{
margin-top: -8px!important;
margin-left: -8px!important;

｝

小开

一位智者曾经帮助过我。

在jquery-ui.css所在的文件夹中，创建一个名为“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

然后出现关闭图标。

小开

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

< >强简短的回答 确保在相同的地方中有一个名为Images的文件夹。images文件夹必须包含新下载的jquery-ui

长回答

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

小开

我找到了三个方法:

  1. 你可以先加载引导。它们加载jquery-ui。但这不是一个好主意。因为你会在控制台看到错误。
  2. < p >:

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

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

  3. 我只是想使用引导样式，我也想有一个图标关闭按钮。我做了以下工作:

    修复后按钮的关闭方式

    .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;
}
小开

如果你在js函数中调用dialog()，你可以使用下面的引导按钮冲突代码

 <div class="row">
<div class="col-md-12">
<input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
</div>
</div>


<div style="display:none;" id="divMessage">
<table class="table table-bordered">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Giri</td>
<td>Prasad</td>
<td>25</td>
</tr>
<tr>
<td>Bala</td>
<td>Kumar</td>
<td>24</td>
</tr>
</table>
</div>






<script type="text/javascript">
function ShowDialog()
{
if (typeof $.fn.bootstrapBtn =='undefined') {
$.fn.bootstrapBtn = $.fn.button.noConflict();
}


$('#divMessage').dialog({
title:'Employee Info',
modal:true
});
}
</script>
小开

甚至在jquery-ui后加载引导，我能够使用这个修复:

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

我也面临着同样的问题，在我的情况下，JQuery-ui.js版本是1.10.3，在引用jquery-ui-1.12.1.min.js关闭按钮开始可见。


提交答案