jQuery UI对话框-缺少关闭图标
我使用了一个自定义的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 Demo page上生成的代码
<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生成的，而不是我，所以我不能在不编辑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);
}
}
});我不知所措，需要帮助。
回答 17
Stack Overflow用户
发布于 2013-12-09 03:25:29
我来晚了一段时间，但我会让你大吃一惊的，准备好了吗？
之所以会发生这种情况，是因为在调用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作为单独的答案进行了澄清。正如一些人报告的那样，当脚本交换时，引导程序工具提示会出现问题。然而，我没有遇到这个问题，因为我下载的jquery UI没有工具提示，因为我不需要它，因为bootstrap。所以这个问题从来没有出现在我身上。
编辑- 22/07/2015 -不要将jquery-ui与jquery混淆！虽然Bootstrap的JavaScript之前需要加载jQuery，但它并不依赖于jQuery-UI。因此jquery-ui.js可以在bootstrap.min.js之后加载，而jquery.js总是需要在Bootstrap之前加载。
Stack Overflow用户
发布于 2015-06-03 08:49:23
这是对顶部答案的评论，但我觉得它值得自己回答，因为它帮助我回答了这个问题。
如果您想让Bootstrap在JQuery UI之后声明(我这样做是因为我想使用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 functionalityStack Overflow用户
发布于 2013-12-05 12:54:20
这似乎是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>");
}
});https://stackoverflow.com/questions/17367736
复制相似问题