[解決済み】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>

で生成されたコードに ダイアログデモページ :

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

途方に暮れているので、助けてほしい。

どのように解決するのですか？

しばらく遅れてしまいましたが、あなたの心を揺さぶりますよ？

この現象が起こる理由は、jquery-uiを呼び出した後にbootstrapを呼び出しているためです。

文字通り、この2つを入れ替えてください。

<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/06/26 - この記事は何ヶ月経っても興味を引き続けるので、私は 編集する価値があると思いました。私は実際にnoConflictがとても好きです。 この回答の下のコメントで提供された解決策と、この回答で明らかになった ユーザーPretty Coolが別アンサーとして回答しています。いくつかの問題点が報告されているように スクリプトを入れ替えた時のブートストラップツールチップの件。私は しかし、私はjquery UIをダウンロードしたため、その問題は発生しませんでした。 ツールチップはブートストラップなので必要ない。そのため、この問題は が出てきました。

編集 - 2015/07/22 - 混同しないようにしましょう jquery-ui とは jquery ! 一方 BootstrapのJavaScriptは、jQueryが事前にロードされている必要がありますが、jQuery-UIには依存しません。そのため jquery-ui.js の後に読み込むことができます。 bootstrap.min.js 一方 jquery.js は常にBootstrapの前に読み込まれる必要があります。