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

Question

我正在使用自定义 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>

到Dialog Demo 页面上生成的代码：

<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生成的，而不是我，所以我不能只添加 span 标签而不编辑 jqueryui js 文件，这似乎是实现正常功能的错误/不必要的选择。

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

我不知所措，需要帮助。

score 476 · Accepted Answer

我迟到了一段时间，但我要让你大吃一惊，准备好了吗？

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

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

<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，因为我不需要它，因为 bootstrap. 所以这个问题从来没有出现在我身上。

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

score 49 · Accepted Answer

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

如果您想在 JQuery UI 之后保持 Bootstrap 声明（我这样做是因为我想使用 Bootstrap 工具提示），声明以下内容（我在之后声明它$(document).ready）将允许按钮再次出现（来自https://stackoverflow.com/的回答一个/23428433/4660870）

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

score 25 · Accepted Answer

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

score 17 · Accepted Answer

我找到了三个修复：

您可以先加载引导程序。他们加载 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;
}

score 16 · Accepted Answer

这在 1.10 中被报告为损坏

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

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

我下载了以前的版本，关闭按钮的 X 重新显示。

score 9 · Accepted Answer

我有同样的问题，也许你已经检查过了，但只需将“images”文件夹放在与 jquery-ui.css 相同的位置即可解决

score 5 · Accepted Answer

我遇到了同样的问题，在阅读并尝试了上面的所有建议之后，我只是在下载并保存在我的应用程序的图像文件夹中之后，尝试在 CSS 中手动替换这个图像（你可以在这里找到它），瞧，问题解决了！

这是CSS：

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

score 4 · Accepted Answer

我知道这个问题很老，但我只是在 jquery-ui v1.12.0 上遇到了这个问题。

简短答案Images确保您在同一个地方有一个文件夹jquery-ui.min.css。images 文件夹必须包含通过新下载的 jquery-ui 找到的图像

长答案

我的问题是我正在使用 gulp 将我的所有 css 文件合并到一个文件中。当我这样做时，我正在更改jquery-ui.min.css. 对话框的 css 代码需要Images在同一目录中调用一个文件夹，并且在该文件夹中需要默认图标。因为 gulp 没有将图像复制到新的目的地，所以它没有显示 x 图标。

score 3 · Accepted Answer

我正在使用 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")}}],
...

出于某种原因，我不得不针对这两个项目，但它的工作原理！

score 2 · Accepted Answer

一位智者曾经帮助过我。

在所在的文件夹中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

并出现关闭图标。

score 2 · Accepted Answer

即使在 jquery-ui 之后加载引导程序，我也能够使用以下方法进行修复：

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

score 1 · Accepted Answer

作为参考，这就是我根据@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();
	}
});

score 1 · Accepted Answer

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

}

score 1 · Accepted Answer

如果您在 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>

score 0 · Accepted Answer

只需添加缺少的：

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

score 0 · Accepted Answer

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

来自 Web Developer 显示 jquery 创建的代码

当我关闭按钮上的 style="display:none:" 时，会出现关闭按钮。所以由于某种原因 display:none; 正在设置，我不知道如何控制它。所以解决这个问题的另一种方法可能是简单地覆盖显示：无。不明白如何做到这一点。

我注意到 KyleMit 发布的答案确实有效，但制作了一个不同的 X 按钮。

我还注意到这个问题不会影响我页面上的所有对话框，而只会影响其中的一些。一些对话框按预期工作；当关闭按钮存在时，其他没有标题（即包含标题的跨度为空）。

我在想某些事情是严重错误的，它可能不是 1.10.x 的时候。

但经过进一步的工作，我发现在某些情况下，标题设置不正确，修复后，X 关闭按钮重新出现。

我曾经这样设置标题：

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

我的代码中不存在该 ID，但显然是由 ac-popup 和 ui-dialog-title 中的 jquery 创建的。有点杂乱无章。但正如我所说，它不再有效，我必须使用以下内容：

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

这样做之后，缺少按钮的问题似乎更好，尽管我不确定它们是否确实相关。

score -1 · Accepted Answer

我遇到了同样的问题，在我的情况下，JQuery-ui.js 版本是 1.10.3，在引用 jquery-ui-1.12.1.min.js 后，关闭按钮开始可见。

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

编辑

17 回答 17

Related

Reference