jQueryUI模式对话框不显示closuresbutton（x）
我在我的ASP .NET MVC 3应用程序中使用jQuery模式对话框。 它工作正常，除了没有closuresbutton显示在右上angular。 我怎样才能添加这个？
$("#dialog-modal").dialog({ modal: true, autoOpen: false, buttons: { Ok: function () { $(this).dialog("close"); } } }); 在对话框的右上angular，将鼠标hover在button所在的位置，看看是不是有一些效果（buttonhover）。 尝试点击它，看看它是否closures。 如果确实closures，那么你只是错过了你的软件包下载的图像精灵。
另一种可能是你有bootstrap库。 某些bootstrap和jquery-ui版本与.button（）方法有冲突，如果你的bootstrap.js放在jquery-ui.js之后，那么引导.button（）会覆盖你的jquerybutton和jquery-ui'X那么形象就不会显现出来。
看到这里： https ： //github.com/twbs/bootstrap/issues/6094
这工作（closures框可见）：
<script src="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="twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
我有这个问题，并能够解决它与下面的声明。
$.fn.bootstrapBtn = $.fn.button.noConflict();
纯CSS解决方法：
我同时使用bootstrap和jQuery UI，改变添加脚本的顺序打破了一些其他的对象。 我结束了使用纯CSS的解决方法：
.ui-dialog-titlebar-close { background: url("http://code.jquery.com/ui/1.10.3/themes/smoothnesshttp://img.dovov.comui-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/smoothnesshttp://img.dovov.comui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0); }
虽然该操作没有明确说明他们正在使用jquery ui和bootstrap在一起，如果你这样做会发生同样的问题。 你可以通过在jquery ui（js）之前加载bootstrap（js）来解决这个问题。 但是，这会导致button状态颜色的问题。
最终的解决scheme是使用引导或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>'); } });
使用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>'); }, ...
如果英文不好原谅我，我正在使用Google翻译。
我认为问题是浏览器无法加载包含X图标的jQueryUI图像精灵。 请使用Fiddler，Firebug或其他可以让您访问浏览器向服务器发出的HTTP请求，并validation图像精灵已成功加载的其他程序。
只需检查jquery-ui.css中的closuresbutton图像path：
.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的path
我有同样的问题只是将这个function添加到打开的对话框选项，它的工作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");
我想你的代码与其他JS库存在一些冲突。 试着强制显示closuresbutton：
... open:function () { $(".ui-dialog-titlebar-close").show(); } ...
这对我有效。
这里是伟大的答案https://stackoverflow.com/a/31045175/3778527我与testing：;
<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>
只需链接CSS为我工作。 它可能已经完全从我的项目中缺失：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
你需要在“确定”周围添加引号。 这是button的文字。 实际上，button的文本当前是空的（因此不显示），因为它试图parsing该variables的值。
除了按下[ok]或[cancel]button之外，模式对话框并不意味着被closures。 如果你想在右手边的[x]，设置模态：假或者完全删除它。
一个解决scheme可以有你的模式内closures
看看这个简单的例子
我有一个类似的问题。 我正在使用jquery和jquery-ui。 当我升级我的版本，closures对话框图像不再出现。 我的问题是，当我解压我下载的js包时，目录没有执行权限。
所以一个快速的chmod + x dir-name，以及子文件夹，都能做到这一点。 没有Linux上的执行权限，Apache无法进入该文件夹。
