我使用一个自定义的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);
        }
    }
});

我不知所措,需要帮助。


当前回答

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

其他回答

一位智者曾经帮助过我。

在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

然后出现关闭图标。

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

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

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

我迟到了一段时间,但我要让你大吃一惊,准备好了吗?

发生这种情况的原因是,在调用jquery-ui in之后,你调用了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>

:)

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. 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之后声明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

这似乎是jQuery发布方式中的一个bug。你可以在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>");
    }
});