javascript jQuery UI 对话框 - 缺少关闭图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17367736/
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
jQuery UI Dialog - missing close icon
提问by Xion Dark
I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.
我正在使用自定义 jQuery 1.10.3 主题。我从主题滚轮直接下载了所有内容，并且我故意没有更改任何内容。
I create a dialog box and I get an empty gray square where the close icon should be:
我创建了一个对话框，我得到一个空的灰色方块，关闭图标应该是：
I compared the code that is generated on my page:
我比较了在我的页面上生成的代码：
<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>
to the code generated on the 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>
EDIT: The different parts of the code are generatedby jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.
编辑：代码的不同部分是由 jQueryUI生成的，而不是我，所以我不能只添加 span 标签而不编辑 jqueryui js 文件，这似乎是实现正常功能的错误/不必要的选择。
Here is the javascript used that generates that part of the code:
这是用于生成该部分代码的 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);
}
}
});
I'm at a loss and need help. Thanks in advance.
我不知所措，需要帮助。提前致谢。
回答by David G
I am late to this one by a while, but I'm going to blow your mind, ready?
我迟到了一段时间，但我要让你大吃一惊，准备好了吗？
The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.
发生这种情况的原因是因为您在调用 jquery-ui 之后调用了 bootstrap。
Literally, swap the two so that instead of:
从字面上看，交换两者，而不是：
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
it becomes
它成为了
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
:)
:)
Edit - 26/06/2015 - this keeps attracting interest months later so I thought it was worth an edit. I actually really like the noConflict solution offered in the comment underneath this answer and clarified by user Pretty Cool as a separate answer. As some have reported issues with the bootstrap tooltip when the scripts are swapped. I didn't experience that issue however because I downloaded jquery UI without the tooltip as I didn't need it because bootstrap. So this issue never came up for me.
Edit - 22/07/2015 - Don't confuse
jquery-uiwithjquery! While Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. Sojquery-ui.jscan be loaded afterbootstrap.min.js, whilejquery.jsalways needs to be loaded before Bootstrap.
编辑 - 26/06/2015 - 几个月后这一直吸引着人们的兴趣，所以我认为值得编辑。我实际上非常喜欢此答案下方的评论中提供的 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 之前加载。
回答by Pretty Cool
This is a comment on the top answer, but I felt it was worth its own answer because it helped me answer the problem.
这是对最佳答案的评论，但我觉得值得自己回答，因为它帮助我回答了问题。
If you want to keep Bootstrap declared after JQuery UI (I did because I wanted to use the Bootstrap tooltip), declaring the following (I declared it after $(document).ready) will allow the button to appear again (answer from https://stackoverflow.com/a/23428433/4660870)
如果您想在 JQuery UI 之后保持 Bootstrap 声明（我这样做是因为我想使用 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 functionality
回答by KyleMit
This appears to be a bug in the way jQuery ships. You can fix it manually with some dom manipulation on the Dialog Openevent:
这似乎是 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>");
}
});
回答by Robert
This is reported as broken in 1.10
这在 1.10 中报告为已损坏
http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/
http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/
phillip on January 29, 2013 at 7:36 am said: In the CDN versions, the dialog close button is missing. There's only the button tag, the span ui-icon is missong.
philip 在 2013 年 1 月 29 日上午 7:36 说： 在 CDN 版本中，对话框关闭按钮丢失。只有按钮标签，span ui-icon 是missong。
I downloaded the previous version and the X for the close button shows back up.
我下载了以前的版本，关闭按钮的 X 显示备份。
回答by Yauheni Charniauski
I found three fixes:
我发现了三个修复：
- You can just load bootsrap first. And them load jquery-ui. But it is not good idea. Because you will see errors in console.
This:
var bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton;helps. But other buttons look terrible. And now we don't have bootstrap buttons.
I just want to use bootsrap styles and also I want to have close button with an icon. I've done following:
How close button looks after fix
.ui-dialog-titlebar-close { padding:0 !important; } .ui-dialog-titlebar-close:after { content: ''; width: 20px; height: 20px; display: inline-block; /* Change path to image*/ background-image: url(themes/base/images/ui-icons_777777_256x240.png); background-position: -96px -128px; background-repeat: no-repeat; }
- 您可以先加载引导程序。他们加载 jquery-ui。但这不是个好主意。因为您会在控制台中看到错误。
这：
var bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton;有帮助。但其他按钮看起来很糟糕。现在我们没有引导按钮。
我只想使用 bootsrap 样式，而且我想有一个带有图标的关闭按钮。我做了以下工作：
.ui-dialog-titlebar-close { padding:0 !important; } .ui-dialog-titlebar-close:after { content: ''; width: 20px; height: 20px; display: inline-block; /* Change path to image*/ background-image: url(themes/base/images/ui-icons_777777_256x240.png); background-position: -96px -128px; background-repeat: no-repeat; }
回答by Juan Hernández
I had the same exact issue, Maybe you already chececked this but got it solved just by placing the "images" folder in the same location as the jquery-ui.css
我有同样的问题，也许你已经检查过了，但只需将“images”文件夹放在与 jquery-ui.css 相同的位置就解决了
回答by Raul Rivero
I got stuck with the same problem and after read and try all the suggestions above I just tried to replace manually this image (which you can find it here) in the CSS after downloaded it and saved in the images folder on my app and voilá, problem solved!
我遇到了同样的问题，在阅读并尝试了上面的所有建议后，我只是尝试在下载后在 CSS 中手动替换此图像（您可以在此处找到它）并保存在我的应用程序上的图像文件夹中，瞧，问题解决了！
here is the CSS:
这是CSS：
.ui-state-default .ui-icon {
background-image: url("../img/ui-icons_888888_256x240.png");
}
回答by James Drinkard
I'm using jQuery UI 1.8.17 and I had this same issue, plus I had additional css stylesheets being applied to things on the page, including the titlebar color. So to avoid any other issues, I targeted the exact ui elements using the code below:
我正在使用 jQuery UI 1.8.17 并且我遇到了同样的问题，此外我还对页面上的内容应用了额外的 css 样式表，包括标题栏颜色。因此，为了避免任何其他问题，我使用以下代码定位了确切的 ui 元素：
$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();
Then I added a close button in the properties of the dialog itself: ...
然后我在对话框本身的属性中添加了一个关闭按钮：...
modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...
For some reason I had to target both items, but it works!
出于某种原因，我不得不针对这两个项目，但它有效！
回答by Junior
I know this question is old but I just had this issue with jquery-ui v1.12.0.
我知道这个问题很老，但我刚刚在 jquery-ui v1.12.0 上遇到了这个问题。
Short AnswerMake sure you have a folder called Imagesin the same placeyou have jquery-ui.min.css. The images folder must contains the images found with a fresh download of the jquery-ui
简短回答确保你有一个文件夹，名为Images在同一个地方，你有jquery-ui.min.css。图像文件夹必须包含通过全新下载的 jquery-ui 找到的图像
Long answer
长答案
My issue is that I am using gulp to merge all of my css files into a single file. When I do that, I am changing the location of the jquery-ui.min.css. The css code for the dialog expects a folder called Imagesin the same directory and inside this folder it expects default icons. since gulp was not copying the images into the new destination it was not showing the x icon.
我的问题是我使用 gulp 将所有 css 文件合并到一个文件中。当我这样做时，我正在更改jquery-ui.min.css. 对话框的 css 代码需要Images在同一目录中调用一个文件夹，并且在该文件夹中需要默认图标。由于 gulp 没有将图像复制到新目的地，因此没有显示 x 图标。
回答by Shashidhar
just add in css
.ui-icon-closethick{
margin-top: -8px!important;
margin-left: -8px!important;
}
}
