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

时间：2013-06-28 14:58:50

标签： javascript jquery-ui jquery-ui-dialog imagebutton

我正在使用自定义的jQuery 1.10.3主题。我从主题滚筒直接下载，我故意没有改变任何东西。

我创建了一个对话框，我得到一个空的灰色方块，其中关闭图标应为： Screen shot of missing close icon

我比较了我页面上生成的代码：

<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 生成，而不是我，所以我不能在不编辑jqueryui js文件的情况下添加span标签，这似乎是实现正常功能的一个糟糕/不必要的选择。 / p>

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

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

17 个答案:

答案 0 :(得分：407)

我迟到了这一点，但我会打扰你的想法，准备好了吗？

发生这种情况的原因是因为你在调用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。从来没有这个问题   我找到了。

     

编辑 - 2015年7月22日 - 请勿将jquery-ui与jquery混淆！而   Bootstrap的JavaScript需要先加载jQuery，它不依赖于jQuery-UI。因此jquery-ui.js可以在bootstrap.min.js之后加载，而jquery.js总是需要在Bootstrap之前加载。

答案 1 :(得分：39)

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

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

答案 2 :(得分：21)

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

答案 3 :(得分：15)

据报道，这在1.10

中被破坏了

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

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

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

答案 4 :(得分：13)

我找到了三个修复：

  1. 您可以先加载bootsrap。他们加载jquery-ui。但这不是个好主意。因为你会在控制台中看到错误。

  2. 此：

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

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

  3. 我只是想使用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;
}

答案 5 :(得分：8)

我有同样的问题，也许你已经对此进行了解决，但只是将“images”文件夹放在与jquery-ui.css相同的位置就解决了这个问题

答案 6 :(得分：5)

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

这是CSS：

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

答案 7 :(得分：2)

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

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

答案 8 :(得分：2)

我知道这个问题已经过时了，但我刚刚遇到了jquery-ui v1.12.0这个问题。

简答 确保您在相同位置中有一个名为Images的文件夹jquery-ui.min.css。 images文件夹必须包含通过全新下载的jquery-ui

找到的图像

答案很长

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

答案 9 :(得分：1)

作为参考，我按照@ john-macintyre的建议扩展了open方法：

＆＃13;
＆＃13; 
$.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();
	}
});
＆＃13;
＆＃13;
＆＃13;

答案 10 :(得分：1)

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

}

答案 11 :(得分：0)

一位聪明人曾帮助过我。

在文件user_friends所在的文件夹...\css中，创建一个文件夹＆＃34; images＆＃34;并将其复制到文件中：

  

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

并出现关闭图标。

答案 12 :(得分：0)

只需添加遗失：

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

答案 13 :(得分：0)

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

From Web Developer showing the jquery-created code

当我关闭按钮上的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创建的。一种kludge。但正如我所说，不再有效，我必须使用以下内容：

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

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

答案 14 :(得分：0)

如果你在js函数中调用dialog（），你可以使用下面的bootstrap按钮冲突代码

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

答案 15 :(得分：0)

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

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

答案 16 :(得分：-1)

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

相关问题
最新问题