我在ASP .NET MVC 3应用程序中使用了jQuery模式对话框。它工作正常，除了右上角没有关闭按钮。我该如何添加？
$("#dialog-modal").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
答案 0 :(得分：184)
另一种可能性是你有自举库。某些版本的bootstrap和jquery-ui与.button（）方法有冲突，如果你的bootstrap.js放在jquery-ui.js之后，bootstrap .button（）会覆盖你的jquery按钮和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>
答案 1 :(得分：38)
在对话框的右上角，将鼠标移到按钮应该所在的位置，然后看看是否有效果（按钮悬停）。尝试点击它，看它是否关闭。如果它关闭了，那么你只是错过了软件包下载附带的图像精灵。
答案 2 :(得分：38)
我遇到了这个问题，并且能够通过下面的声明解决它。
$.fn.bootstrapBtn = $.fn.button.noConflict();
答案 3 :(得分：18)
纯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);
}
答案 4 :(得分：12)
虽然op没有明确声明他们一起使用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>');
}
});
答案 5 :(得分：5)
只需检查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
答案 6 :(得分：5)
使用构思user2620505的原则得到了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>');
},
...
如果英语不好原谅我，我正在使用谷歌翻译。
答案 7 :(得分：4)
我认为问题是浏览器无法加载包含X图标的jQueryUI图像精灵。请使用Fiddler，Firebug或其他一些可以让您访问浏览器向服务器发出的HTTP请求，并验证图像精灵是否已成功加载。
答案 8 :(得分：4)
我有同样的问题，只需将此功能添加到打开的对话框选项，它就可以使用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");
答案 9 :(得分：3)
我想你的代码中存在与其他JS库的冲突。尝试强制显示关闭按钮：
...
open:function () {
$(".ui-dialog-titlebar-close").show();
}
...
这对我有用。
答案 10 :(得分：2)
这是一个很好的答案https://stackoverflow.com/a/31045175/3778527 我接受了测试：
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
答案 11 :(得分：1)
只是链接CSS为我工作。它可能完全从我的项目中遗漏了：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
答案 12 :(得分：0)
您需要在“确定”周围添加引号。那是按钮的文字。实际上，按钮的文本当前是空的（因此没有显示），因为它正在尝试解析该变量的值。
除了按[ok]或[cancel]按钮之外，不打算以任何方式关闭模态对话框。如果你想要右上角的[x]，设置modal：false或者只是将它完全删除。
答案 13 :(得分：0)
解决方案可以在你的模态中关闭
看看this简单示例
答案 14 :(得分：0)
我有类似的问题。我正在使用jquery和jquery-ui。当我升级版本时，关闭的对话框图像不再出现。我的问题是当我解压缩我下载的js包时，目录没有执行权限。
所以快速的chmod + x dir-name，以及子文件夹，都可以实现。如果没有linux的执行权限，apache就无法进入该文件夹。
答案 15 :(得分：0)
我的解决方案是把这个
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
毕竟是js和样式表声明