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>

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

EDIT

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

我不知所措，需要帮助。

当前回答

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

下面是CSS:

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

2014-08-13 16:15:24

其他回答

我使用jQuery UI 1.8.17和我有同样的问题，加上我有额外的css样式表应用到页面上的东西，包括 titlebar颜色。因此，为了避免任何其他问题，我使用下面的代码针对确切的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")}}],
...

出于某种原因，我必须同时瞄准这两种道具，但它确实有效!

2013-11-15 15:28:25

我找到了三个方法:

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

2016-09-21 13:57:11

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

2020-09-08 02:49:40

这在1.10中被打破

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

phillip在2013年1月29日早上7:36说:在CDN版本中对话框关闭按钮缺失。只有按钮标签，span Ui-icon是错误的。

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

2013-08-20 20:56:15

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

当我关闭按钮上的style="display:none:"时，就会出现关闭按钮。所以出于某种原因，显示:没有;已经准备好了，我不知道怎么控制它。因此，解决这个问题的另一种方法可能是简单地重写显示:none。但我不知道该怎么做。

我注意到KyleMit发布的答案确实有效，但使X按钮看起来不同。

我还注意到，这个问题并不会影响我页面上的所有对话框，只会影响一部分对话框。一些对话框按预期工作;其他的没有标题(即，包含标题的span是空的)，而关闭按钮是存在的。

我在想有些事情是严重错误的，现在可能不是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);

这样做之后，丢失按钮的问题似乎有所好转，尽管我不确定它们是否一定相关。

2013-12-31 00:41:25

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

推荐文章

最新文章

标签