jQuery UI对话框 - 缺少关闭图标 [英] jQuery UI Dialog - missing close icon

问题描述

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

I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.

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

I create a dialog box and I get an empty gray square where the close icon should be:

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

I compared the code that is generated on my page:

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

编辑：
代码的不同部分是生成通过jQueryUI，而不是我，所以我不能只是添加span标签而不编辑jqueryui js文件，这似乎是一个糟糕/不必要的选择，以实现正常的功能。

The different parts of the code are generated by jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.

这里是生成该部分代码的javascript：

Here is the javascript used that generates that part of the code:

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

我很茫然，需要帮助。在此先感谢。

I'm at a loss and need help. Thanks in advance.

推荐答案

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

I am late to this one by a while, but I'm going to blow your mind, ready?

之所以发生这种情况，是因为你在调用jquery-ui之后调用了bootstrap。

The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.

从字面上看，交换两个代码而不是：

Literally, swap the two so that instead of:

<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日 - 这几个月后仍然引起人们的兴趣，所以我认为值得编辑的是b $ b。我实际上非常喜欢在这个答案下面的评论中提供的noConflict
解决方案，并由用户Pretty Cool澄清
作为一个单独的答案。有些人报告在交换脚本时使用引导工具提示发出
。我没有
经验那个问题因为我下载了jquery UI没有
工具提示，因为我不需要它因为bootstrap。所以这个问题永远不会给我带来
。

Edit - 26/06/2015 - this keeps attracting interest months later so I thought it was worth an edit. I actually really like the noConflict solution offered in the comment underneath this answer and clarified by user Pretty Cool as a separate answer. As some have reported issues with the bootstrap tooltip when the scripts are swapped. I didn't experience that issue however because I downloaded jquery UI without the tooltip as I didn't need it because bootstrap. So this issue never came up for me.

编辑 - 2015年7月22日 - 不要混淆 jquery-ui with jquery ！虽然
Bootstrap的JavaScript需要之前加载jQuery，但它不依赖于jQuery-UI。所以 jquery-ui.js 可以在 bootstrap.min.js 之后加载，而 jquery总是需要在Bootstrap之前加载.js 。

Edit - 22/07/2015 - Don't confuse jquery-ui with jquery! While Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. So jquery-ui.js can be loaded after bootstrap.min.js, while jquery.js always needs to be loaded before Bootstrap.

这篇关于jQuery UI对话框 - 缺少关闭图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！