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


188

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

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


1
您是否检查过文件系统中是否存在图标的图像文件?
Tiquelou

是的,图标图像存在并且位于正确的位置。
Xion Dark

Answers:


443

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

发生这种情况的原因是因为您在调用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-uijquery!尽管Bootstrap的JavaScript需要先加载jQuery,但它并不依赖jQuery-UI。因此jquery-ui.js可以在之后加载bootstrap.min.js,而jquery.js始终需要在Bootstrap之前加载。


7
这解决了我的问题。我按以下顺序包括了资源:1)JQuery核心2)bootstrap 3)JQueryUI。谢谢你的帮助; 迟到总比不到好!PS-你确实让我震惊。
Xion Dark

6
甚至更晚...您能解释一下为什么引导程序排序与它有关吗?
AndyC 2014年

4
如果您将Bootstrap的订单调换到Jquery UI之前,那么Bootstrap工具提示将不起作用。
2014年

4
尽管这实际上不是一个好的解决方案,但我对其进行了投票,因为它提供了一种快速的方法来验证这是问题所在。最后,我个人将使用Raul Riveros的解决方案,因为简单地交换两个脚本会导致很多其他更大的问题。顺便说一句,当我看到它时,我有点傻。
krowe

18
如果您不想更改Bootstrap和jQuery UI的顺序,还可以修复按钮:$.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517
l.poellabauer 2015年

45

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

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

这是一种非常巧妙的处理方式,不会打扰电话。+1相同。
Aalok Mishra

干扰Button类
Stefano Mtangoo,2017年

1
此解决方案的问题是,这将破坏您要使用引导按钮功能(例如button('loading'))的代码。为了确保现有的引导程序按钮功能仍然有效,请将引导程序“ button()”函数调用的所有引用替换为“ bootstrapBtn()”。(是的,我知道代码注释暗示了这一点,但是我认为值得明确地说出来。)
KornélRegius

您的编辑者是否抱怨缺少分号?
R. Schreurs '18

22

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

8
仅供参考,以供将来的读者阅读,您可以扩展ui.dialog(链接),因此您不必在每个调用中都重复此开放功能。
约翰·麦金太尔

2
这工作得很好。X比正常情况稍微偏左...不知道确切的原因。
ashlar64

很好的解决方案!但是在我的情况下,removeClass(...)是不必要的,并且导致对话框窗口左侧的X按钮放错位置。只需将html()方法链接到find()方法即可完成工作。谢谢。
亚米尔

16

据报告在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,但至少现在我不那么疯狂了。我选择暂时忽略它。谢谢。
Xion Dark

我可以确认这仍然是1.10.3中的问题
Frug,

在1.10.4中仍然相同
Dbloch

1.12.1中的相同问题
TetraDev

15

我发现了三个修复程序:

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

优秀!如果您没有安装图像文件或任何特定主题,则可以在这里获取它:jqueryui.com/themeroller。下载主题并选择所需的组件(在本例中为对话框)。然后下载,提取,打开主题或图像文件夹,然后将与您的主题匹配的图像文件复制到您的项目中。然后更改Yauheni在其答案中提供的css中的引用。
Exel Gamboa

您的观点3为我解决了这个问题。我只需要在宽度,高度和背景位置上做些微调整,就可以使按钮看起来像我想要的那样。谢谢。
Vimalan Jaya Ganesh

9

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


3
实际上,这是为我解决了问题,或者至少已弄清了问题的答案。我有一个测试页面,该页面引用了jquery-ui.css 的在线(即code.jquery.com / ...)副本,在这种情况下,显示“ X”。但是,在我的实际项目页面上,该页面在本地css文件夹中具有.css文件,但未显示“ X”。将“ images”文件夹复制到我的.css文件旁边的本地css文件夹中,解决了此问题。
戴夫·马利

5

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

这是CSS:

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

3

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

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


3

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

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

长答案

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


1

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


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

}


1

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

1

一个智者曾经帮助过我。

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

并显示关闭图标。


0

只需添加缺少的内容:

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

3
我不能 我没有创建html的那部分,jquery却创建了。我在问题中添加了更多信息以阐明这一点。
Xion Dark 2013年

0

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

从Web Developer显示jQuery创建的代码

当我关闭按钮上的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);

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


0

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

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.