jQuery jQueryUI 模态对话框不显示关闭按钮 (x)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8681707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryUI modal dialog does not show close button (x)
提问by Antarr Byrd
I'm using a jQuery modal dialog in my ASP .NET MVC 3 application. It works fine except for that there is no close button showing in the top right corner. How can I add this?
我在我的 ASP .NET MVC 3 应用程序中使用了一个 jQuery 模式对话框。除了右上角没有显示关闭按钮之外，它工作正常。我怎样才能添加这个？
$("#dialog-modal").dialog({
modal: true,
autoOpen: false,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
采纳答案by PriorityMark
In the upper right corner of the dialog, mouse over where the button shouldbe, and see rather or not you get some effect (the button hover). Try clicking it and seeing if it closes. If it does close, then you're just missing your image sprites that came with your package download.
在对话框的右上角，将鼠标悬停在按钮应该在的位置上，看看是否会得到一些效果（按钮悬停）。尝试单击它并查看它是否关闭。如果它确实关闭了，那么您只是缺少软件包下载附带的图像精灵。
回答by mekane84
Another possibility is that you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
另一种可能性是您拥有引导程序库。某些版本的 bootstrap 和 jquery-ui 与 .button() 方法有冲突，如果您的 bootstrap.js 放在 jquery-ui.js 之后，则引导程序 .button() 会覆盖您的 jquery 按钮和 jquery-ui 'X ' 图像将不会出现。
see here: https://github.com/twbs/bootstrap/issues/6094
见这里：https: //github.com/twbs/bootstrap/issues/6094
This works (close box visible):
这有效（关闭框可见）：
<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>
This causes the issue:
这会导致问题：
<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>
回答by Yure Kesley
I had this problem and was able to resolve it with the declaration below.
我遇到了这个问题，并且能够通过下面的声明解决它。
$.fn.bootstrapBtn = $.fn.button.noConflict();
回答by Binod Kalathil
Pure CSS Workaround:
纯 CSS 解决方法：
I was using both bootstrap and jQuery UI and changing the order of adding the scripts broke some other objects. I ended up using pure CSS workaround:
我同时使用 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);
}
回答by dhollenbeck
While the op does not explicitly state they are using jquery ui and bootstrap together, an identical problem happens if you do. You can resolve the problem by loading bootstrap (js) before jquery ui (js). However, that will cause problems with button state colors.
虽然 op 没有明确说明他们同时使用 jquery ui 和 bootstrap，但如果你这样做，会发生同样的问题。您可以通过在 jquery ui (js) 之前加载 bootstrap (js) 来解决问题。但是，这会导致按钮状态颜色出现问题。
The final solution is to either use bootstrap or jquery ui, but not both. However, a workaround is:
最终的解决方案是使用 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>');
}
});
回答by Lakshmi
Just check the close button image path in your jquery-ui.css:
只需检查 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}*/;
}
Correct the path of icons_222222_256x240.pngand ui-icons_454545_256x240.png
更正的路径icons_222222_256x240.png和ui-icons_454545_256x240.png
回答by davidsonsns
Using the principle of the idea user2620505 got result with implementation of addClass:
使用 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>');
},
...
If English is bad forgive me, I am using Google Translate.
如果英语不好请原谅我，我正在使用谷歌翻译。
回答by David Fawzy
I had the same issue just add this function to the open dialog options and it worked sharm
我遇到了同样的问题，只需将此功能添加到打开的对话框选项中，它就可以正常工作
open: function(){
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>');
},
and on close event you need to remove that
在关闭事件中，您需要删除它
close: function () {
var closeBtn = $('.ui-dialog-titlebar-close');
closeBtn.html('');}
Complete example
完整示例
<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");
回答by epignosisx
I think the problem is that the browser could not load the jQueryUI image sprite that contains the X icon. Please use Fiddler, Firebug, or some other that can give you access to the HTTP requests the browser makes to the server and verify the image sprite is loaded successfully.
我认为问题在于浏览器无法加载包含 X 图标的 jQueryUI 图像精灵。请使用 Fiddler、Firebug 或其他一些可以让您访问浏览器向服务器发出的 HTTP 请求并验证图像精灵加载成功的工具。
回答by Adrian P.
I suppose there is some conflict with other JS library in your code. Try to force showing the close button:
我想您的代码中与其他 JS 库存在一些冲突。尝试强制显示关闭按钮：
...
open:function () {
$(".ui-dialog-titlebar-close").show();
}
...
This worked for me.
这对我有用。
