我在我的ASP .NET MVC 3应用程序中使用了jQuery模态对话框。它运行良好，除了在右上角没有显示关闭按钮。我该如何添加这个按钮？
$("#dialog-modal").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
另一种可能性是您拥有bootstrap库。某些版本的bootstrap和jquery-ui与.button()方法冲突，如果您的bootstrap.js放置在jquery-ui.js之后，则bootstrap .button()将覆盖您的jquery button，并且jquery-ui的'X'图像将不会显示。
请参见此处：https://github.com/twbs/bootstrap/issues/6094
这样做可以解决问题（关闭框可见）：
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
这导致了问题:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
我遇到了这个问题，通过下面的声明解决了它。
$.fn.bootstrapBtn = $.fn.button.noConflict();
noConflict() 函数似乎是自我消耗的（我有 function (){return a.fn.button=d,this}）。也就是说，在调用之后，它是 undefined。为了进行防御性编码，我将 noConflict 调用放在打开 jQuery 对话框的函数中，因此在执行 noConflict 之前需要检查 if ($.fn.button.noConflict) {...。 - ruffin在对话框的右上角，把鼠标悬停在 应该 有按钮的位置上，并观察是否会出现一些效果（按钮悬停）。尝试点击它并查看是否关闭。如果关闭了，则说明您只是缺少随包下载的图像精灵。
/css/images/而不是像其他图像一样的/root/images/。 - Millhorn仅使用 CSS 解决问题：
我同时使用了 bootstrap 和 jQuery UI，但在添加这些脚本的顺序后，一些其他对象出现问题。最终，我使用了纯 CSS 的解决方案：
.ui-dialog-titlebar-close {
background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
border: medium none;
}
.ui-dialog-titlebar-close:hover {
background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
}
虽然原帖没有明确说明他们是否同时使用jquery ui和bootstrap，但是如果这样做，将会出现相同的问题。您可以通过在jquery ui(js)之前加载bootstrap(js)来解决问题。但是，这样做会导致按钮状态颜色的问题。
最终的解决方法是要么只使用bootstrap，要么只使用jquery ui。然而，一个变通的方法是：
$('<div>dialog content</div>').dialog({
title: 'Title',
open: function(){
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
}
});
span元素，还从关闭按钮中删除了几个类。因此，我最终得到了稍微修改过的版本，它还向关闭按钮添加了缺少的类：var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"); - informatik01使用想法用户2620505提出的原则，通过实现addClass方法获得了结果：
...
open: function(){
$('.ui-dialog-titlebar-close').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only');
$('.ui-dialog-titlebar-close').append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>');
},
...
我遇到了同样的问题，只需将此函数添加到打开对话框选项中即可解决 sharm
open: function(){
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
},
close: function () {
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.html('');}
完整示例
<div id="deleteDialog" title="Confirm Delete">
Can you confirm you want to delete this event?
</div>
$("#deleteDialog").dialog({
width: 400, height: 200,
modal: true,
open: function () {
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
},
close: function () {
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.html('');
},
buttons: {
"Confirm": function () {
calendar.fullCalendar('removeEvents', event._id);
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
请在您的jquery-ui.css中检查关闭按钮图像路径：
.ui-icon {
width: 16px;
height: 16px;
background-image: url**(../img/ui-icons_222222_256x240.png)**/*{iconsContent}*/;
}
.ui-widget-content .ui-icon {
background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsContent}*/;
}
.ui-widget-header .ui-icon {
background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsHeader}*/;
}
.ui-state-default .ui-icon {
background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/;
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsHover}*/;
}
.ui-state-active .ui-icon {
background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsActive}*/;
}
更正 icons_222222_256x240.png 和 ui-icons_454545_256x240.png 的路径。
我认为问题出在浏览器无法加载包含X图标的jQueryUI图片精灵上。请使用Fiddler、Firebug或其他可以让您访问浏览器向服务器发出的HTTP请求的工具，验证图片精灵是否已成功加载。
我猜你的代码中可能与其他JS库存在冲突。尝试强制显示关闭按钮：
...
open:function () {
$(".ui-dialog-titlebar-close").show();
}
...
$.fn.button.noConflict()应该是答案。 - robbpriestley