jQuery UI对话框-缺少关闭图标

我正在使用自定义jQuery 1.10.3主题。我从主题滚筒下载了所有笔直的文件，但我没有故意更改任何内容。

我创建一个对话框，并得到一个空的灰色正方形，其中关闭图标应为：

我比较了页面上生成的代码：

<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>

到“ 对话框演示”页面上生成的代码：

<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>

编辑：代码的不同部分是由jQueryUI 生成的，不是我，所以我不能不编辑jqueryui js文件就添加span标签，这似乎是实现正常功能的错误/不必要的选择。

这是用于生成该部分代码的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);
        }
    }
});

我很茫然，需要帮助。提前致谢。

我迟到了一段时间，但是我要打动您，准备好了吗？

发生这种情况的原因是因为您在调用jquery-ui之后调用了bootstrap in。

从字面上看，将两者互换，而不是：

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

它成为了

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

编辑-2015年6月26日-几个月后，这一直吸引着人们的兴趣，因此我认为值得进行编辑。实际上，我真的很喜欢此答案下方的注释中提供的noConflict解决方案，并由用户Pretty Cool澄清为单独的答案。正如某些人报告的那样，交换脚本时引导工具提示出现问题。但是我没有遇到这个问题，因为我下载了没有工具提示的jquery UI，因为我不需要它，因为引导程序。所以这个问题从来没有想过。

编辑- 22/07/2015 -不要混淆jquery-ui与jquery！尽管Bootstrap的JavaScript需要先加载jQuery，但它并不依赖jQuery-UI。因此jquery-ui.js可以在之后加载bootstrap.min.js，而jquery.js始终需要在Bootstrap之前加载。

这是对最佳答案的评论，但我认为它值得自己回答，因为它可以帮助我回答问题。

如果要保留在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

这似乎是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>");
    }
});

据报告在1.10中已损坏

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip在2013年1月29日上午7:36说：在CDN版本中，缺少对话框关闭按钮。只有按钮标签，范围ui-icon是missong。

我下载了以前的版本，然后关闭按钮的X出现了。

我发现了三个修复程序：

1. 您可以先加载bootsrap。然后加载jquery-ui。但这不是一个好主意。因为您将在控制台中看到错误。

2. 这个：

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;

   帮助。但是其他按钮看起来很糟糕。现在我们没有引导按钮。

3. 我只想使用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;
   }

我有一个完全相同的问题，也许您已经检查了这个问题，但是只是通过将“ images”文件夹放在与jquery-ui.css相同的位置来解决了

我遇到了同样的问题，在阅读并尝试了上述所有建议之后，我只是尝试在下载并保存到我的应用程序和image的images文件夹中后，在CSS中手动替换此图片（您可以在此处找到它），问题解决了！

这是CSS：

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

我使用的是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();

然后，我在对话框本身的属性中添加了一个关闭按钮：...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

出于某种原因，我必须同时定位这两个项目，但确实可行！

我知道这个问题很旧，但是jquery-ui v1.12.0刚出现了这个问题。

简短回答 确保您Images在与您所在的位置相同的位置有一个文件夹jquery-ui.min.css。images文件夹必须包含通过全新下载的jquery-ui找到的图像

长答案

我的问题是我正在使用gulp将所有的CSS文件合并到一个文件中。当我这样做时，我正在更改的位置jquery-ui.min.css。对话框的css代码期望Images在同一目录中有一个名为的文件夹，并且在此文件夹中期望有默认图标。由于gulp并未将图像复制到新目的地，因此未显示x图标。

作为参考，这是我按照@ john-macintyre的建议扩展open方法的方式：

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

如果要在js函数中调用dialog（），则可以使用以下引导按钮冲突代码

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>

一个智者曾经帮助过我。

在所在的文件夹中jquery-ui.css，创建一个名为“ images”的文件夹，并将以下文件复制到其中：

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

并显示关闭图标。

只需添加缺少的内容：

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

我也有这个问题。这是为关闭按钮插入的代码：

当我关闭按钮上的style =“ display：none：”时，将显示关闭按钮。因此由于某种原因，display：none; 正在设置，但我看不到如何控制它。因此解决此问题的另一种方法可能是简单地覆盖display：none。虽然看不到该怎么做。

我注意到KyleMit发布的答案确实有效，但是使外观看起来与众不同。

我还注意到，此问题并不影响页面上的所有对话框，而仅影响其中的一部分。一些对话框按预期工作；当关闭按钮出现时，其他没有标题（即，包含标题的跨度为空）。

我认为有些严重错误，可能不是1.10.x的时间。

但是经过进一步的工作，我发现在某些情况下标题设置不正确，并且在解决此问题后，X关闭按钮重新出现了应有的状态。

我以前是这样设置标题的：

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

该ID在我的代码中不存在，但是显然是由jQuery从ac-popup和ui-dialog-title创建的。有点笨拙。但是正如我所说的那样，它不再起作用，而我必须使用以下内容：

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

完成此操作后，尽管我不确定它们是否绝对相关，但缺少按钮的问题似乎更好。

即使在jquery-ui之后加载引导程序，我也可以使用以下命令进行修复：

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}