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

Posted 2023-03-06

技术标签:

【中文标题】jQuery UI 对话框 - 缺少关闭图标【英文标题】：jQuery UI Dialog - missing close icon 【发布时间】：2013-06-26 09:44:21 【问题描述】：

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

编辑

代码的不同部分由 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);
        
    
);

我不知所措，需要帮助。

【问题讨论】：

您是否检查过您的文件系统中是否存在图标的图像文件？是的，图标图像表存在并且在正确的位置。 【参考方案1】：

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

发生这种情况的原因是，在您调用 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 而没有工具提示，因为我不需要它，因为引导程序。所以这个问题从来没有来找我了。

编辑 - 22/07/2015 - 不要将 jquery-ui 与 jquery 混淆！尽管 Bootstrap 的 JavaScript 需要事先加载 jQuery，它不依赖 jQuery-UI。所以jquery-ui.js可以在bootstrap.min.js之后加载，而jquery.js总是需要在Bootstrap之前加载。

【讨论】：

这解决了我的问题。我按以下顺序包含资源：1）JQuery 核心 2）引导程序 3）JQueryUI。谢谢你的帮助;迟到总比不到好！ PS - 你确实让我大吃一惊。以后...你能解释一下为什么引导排序与它有关吗？如果你在 Jquery UI 之前交换了 Bootstrap 的顺序，那么 Bootstrap 工具提示将不起作用。虽然这实际上不是一个好的解决方案，但我赞成它，因为它提供了一种快速验证这是否是问题的方法。我个人最终会使用 Raul Riveros 的解决方案，因为简单地交换两个脚本会导致很多其他更大的问题。顺便说一句，当我看到它时，我有点震惊。如果你不想改变Bootstrap和jQuery UI的顺序你也可以修复按钮：$.fn.bootstrapBtn = $.fn.button.noConflict();***.com/a/23428433/402517【参考方案2】：

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

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

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

【讨论】：

这是一种非常巧妙的做事方式，不会过多地干扰通话。 +1 相同。干扰按钮类这个解决方案的问题是这会破坏你想要使用引导按钮功能的代码，比如按钮（'加载'）。为了确保现有的引导按钮功能仍然有效，请将引导“button()”函数调用的所有引用替换为“bootstrapBtn()”。（是的，我知道代码 cmets 有点暗示这一点，但我认为值得明确地说出来。）你的编辑不抱怨缺少分号吗？【参考方案3】：

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

【讨论】：

仅供未来读者参考，您可以extend ui.dialog (link)，这样您就不必在每次通话中重复此开放功能。这很好用。 X 比正常情况稍微偏左一点……不知道究竟是为什么。很好的解决方案！但是在我的情况下， removeClass(...) 是不必要的，并且导致对话框窗口左侧的 X 按钮错位。只需将 html() 方法链接到 find() 方法就可以了。谢谢。太好了，我必须为你投票。【参考方案4】：

我找到了三个修复：

这个：

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

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

我只想使用 bootsrap 样式，并且我希望有一个带有图标的关闭按钮。我已经完成了以下操作：

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;

【讨论】：

太棒了！如果您没有安装图像文件或任何特定主题，您可以在此处获取：jqueryui.com/themeroller。下载主题并选择您需要的组件（在本例中为对话框）。然后下载、解压、打开主题或图像文件夹，将与您的主题匹配的图像文件复制到您的项目中。然后更改 Yauheni 在他的回答中提供的 css 中的引用。您的第 3 点为我解决了这个问题。我只需要对宽度、高度和背景位置进行微调，就可以使按钮看起来像我想要的那样。谢谢。【参考方案5】：

这在 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.10.3 但至少我现在感觉不那么疯狂了。我选择暂时忽略它。谢谢。我可以确认这在 1.10.3 中仍然是一个问题 1.12.1 中的同样问题【参考方案6】：

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

【讨论】：

实际上这是为我解决问题的响应，或者至少澄清了它。我有一个引用 jquery-ui.css 的在线（即code.jquery.com/...）副本的测试页面，在这种情况下，“X”出现了。但是，在我的实际项目页面中，在本地 css 文件夹中有 .css 文件，“X”没有显示。将“images”文件夹连同我的 .css 文件一起复制到我的本地 css 文件夹，解决了这个问题。【参考方案7】：

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

这里是 CSS：

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

【讨论】：

【参考方案8】：

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

简答确保在您拥有jquery-ui.min.css 的同一位置 有一个名为Images 的文件夹。 images 文件夹必须包含新下载的 jquery-ui 找到的图像

长答案

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

【讨论】：

【参考方案9】：

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

出于某种原因，我不得不同时针对这两个项目，但它确实有效！

【讨论】：

【参考方案10】：

一位智者曾经帮助过我。

在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

并出现关闭图标。

【讨论】：

【参考方案11】：

作为参考，这是我按照@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();
	
);

【讨论】：

【参考方案12】：

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

【讨论】：

【参考方案13】：

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

【讨论】：

【参考方案14】：

即使在 jquery-ui 之后加载引导程序，我也能够使用这个来修复：

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

【讨论】：

【参考方案15】：

只需添加缺少的：

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

【讨论】：

我不能。我不创建 html 的那部分，jquery 会。我在我的问题中添加了更多信息以澄清这一点。【参考方案16】：

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

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

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

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

我认为有些严重错误，可能不是 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);

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

【讨论】：

【参考方案17】：

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

【讨论】：

以上是关于jQuery UI 对话框 - 缺少关闭图标的主要内容，如果未能解决你的问题，请参考以下文章

Jquery UI 对话框使不可关闭

jQuery UI 对话框按钮图标

jquery-ui 对话框不居中，关闭按钮奇怪的行为

jquery-ui-dialog - 如何挂钩对话框关闭事件

关闭 jQuery UI 对话框

如何在打开新对话框之前关闭所有 jquery ui 对话框？