203

カスタム 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ファイルを編集せずにスパンタグを追加することはできません。これは、通常の機能を実現するための悪い/不必要な選択のようです.

コードのその部分を生成するために使用される 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);
        }
    }
});

私は途方に暮れており、助けが必要です。

4

17 に答える 17

476

私はこれにしばらく遅れていますが、私はあなたの心を吹き飛ばすつもりです、準備はできていますか?

これが発生する理由は、jquery-ui を呼び出した後にブートストラップを呼び出しているためです。

文字通り、代わりに次のように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 年 6 月 26 日 - これは数か月後も関心を集め続けているので、編集する価値があると思いました。私は実際、この回答の下のコメントで提供され、別の回答としてユーザー Pretty Cool によって明確にされた noConflict ソリューションが本当に気に入っています。スクリプトが交換されたときのブートストラップ ツールチップに関する問題が報告されています。ただし、ブートストラップのために必要なかったので、ツールチップなしでjquery UIをダウンロードしたため、その問題は発生しませんでした。したがって、この問題は私には思い浮かびませんでした。

編集 - 2015 年 7 月 22 日 - と混同jquery-uiしないでくださいjquery。Bootstrap の JavaScript では、事前に jQuery をロードする必要がありますが、jQuery-UI には依存していません。そのため、常に Bootstrap の前にロードする必要がありますが、jquery-ui.js後でロードできます。bootstrap.min.jsjquery.js

于 2013-12-08T19:25:28.830 に答える
49

これは一番の答えに関するコメントですが、問題に答えるのに役立つので、それはそれ自身の答えの価値があると感じました。

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
于 2015-06-03T00:49:22.653 に答える
17

私は3つの修正を見つけました：

  1. 最初にブートストラップをロードするだけです。そして、jquery-ui をロードします。しかし、それは良い考えではありません。コンソールにエラーが表示されるためです。

  2. これ：

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

    役立ちます。しかし、他のボタンはひどく見えます。また、ブートストラップ ボタンはありません。

  3. ブートストラップ スタイルを使用したいだけでなく、アイコン付きの閉じるボタンが必要です。私は次のことをしました：

    修正後の閉じるボタンの外観

    .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;
}
于 2016-09-21T13:57:11.430 に答える
16

これは 1.10 で壊れていると報告されています

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

2013 年 1 月 29 日午前 7 時 36 分の phillip は次のように述べています。 CDN バージョンでは、ダイアログを閉じるボタンがありません。ボタンタグのみがあり、スパンの ui-icon がありません。

以前のバージョンをダウンロードしたところ、閉じるボタンの X が元に戻りました。

于 2013-08-20T20:56:15.230 に答える
4

この質問は古いことは知っていますが、jquery-ui v1.12.0 でこの問題が発生しました。

簡単な回答と同じ場所Imagesに フォルダがあることを確認してください。images フォルダーには、jquery-ui の新規ダウンロードで見つかった画像が含まれている必要があります。jquery-ui.min.css

長い答え

私の問題は、gulp を使用してすべての css ファイルを 1 つのファイルにマージしていることです。そうするとき、私はの場所を変更していますjquery-ui.min.css。ダイアログの css コードはImages、同じディレクトリで呼び出されるフォルダーを想定しており、このフォルダー内ではデフォルトのアイコンを想定しています。gulp は画像を新しい宛先にコピーしていないため、x アイコンは表示されませんでした。

于 2016-09-03T17:50:58.433 に答える
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")}}],
...

何らかの理由で両方のアイテムをターゲットにする必要がありましたが、うまくいきました!

于 2013-11-15T15:28:25.907 に答える
2

賢者がかつて私を助けてくれました。

が置かれているフォルダー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

閉じるアイコンが表示されます。

于 2016-06-01T08:45:12.190 に答える
2

jquery-ui の後にブートストラップをロードしても、これを使用して修正できました。

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}
于 2020-05-14T03:45:41.273 に答える
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();
	}
});

于 2015-05-20T04:22:19.287 に答える
0

足りないものを追加するだけです：

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
于 2013-06-28T15:08:00.577 に答える