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

我不知所措，需要帮助。

当前回答

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

其他回答

一位智者曾经帮助过我。

在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

然后出现关闭图标。

2016-06-01 08:45:12

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

2018-02-07 06:18:34

甚至在jquery-ui后加载引导，我能够使用这个修复:

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

2020-05-14 03:45:41

我知道这个问题很老了，但我刚刚遇到了jquery-ui v1.12.0的问题。

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

长回答

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

2016-09-03 17:50:58

我遇到了同样的问题，在阅读和尝试了上面所有的建议后，我只是试图手动替换这张图像(你可以在这里找到它)在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对话框-缺少关闭图标

推荐文章

最新文章

标签