jQuery UI Dialog-閉じるアイコンがありません

カスタム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ファイルを編集せずに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を呼び出した後に、ブートストラップを呼び出しているためです。

文字通り、次の代わりに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に依存していません。したがって、のjquery-ui.js後bootstrap.min.jsにロードできますが、jquery.js常に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の出荷方法のバグのようです。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>");
    }
});

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

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

2013年1月29日午前7時36分にフィリップは言った：CDNバージョンでは、ダイアログを閉じるボタンがありません。ボタンタグしかなく、スパンui-iconが間違っています。

以前のバージョンをダウンロードすると、閉じるボタンのXが表示されます。

私は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;
   }

私は同じ正確な問題を抱えていました、多分あなたはすでにこれをチェックしていましたが、jquery-ui.cssと同じ場所に「images」フォルダを配置するだけで解決しました

私は同じ問題で行き詰まり、上記のすべての提案を読んで試した後、この画像を手動で置き換えようとしました（ここで見つけることができます））て、CSSでダウンロードし、アプリとボイラーの画像フォルダーに保存した後、問題が解決しました！

ここにCSSがあります：

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

私は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")}}],
...

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

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

短い答え あなたが呼ばれるフォルダ持ってくださいImagesに同じ場所あなたが持っているのjquery-ui.min.css。画像フォルダには、jquery-uiの新規ダウンロードで見つかった画像が含まれている必要があります

長い答え

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

参考までに、これは@ 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();
	}
});

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

}

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配置され、「画像」という名前のフォルダを作成し、そこにファイルの下にコピーします。

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

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

足りないものを追加してください：

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

私もこの問題を抱えています。次に、閉じるボタンに挿入されるコードを示します。

ボタンのstyle = "display：none："をオフにすると、閉じるボタンが表示されます。したがって、何らかの理由で表示する：なし; が設定され始めており、それを制御する方法がわかりません。したがって、これに対処するもう1つの方法は、display：noneをオーバーライドすることです。それを行う方法はわかりません。

KyleMitによって投稿された回答は機能しますが、見た目が異なるXボタンになります。

また、この問題が私のページのすべてのダイアログに影響を与えるのではなく、一部のダイアログにのみ影響を与えることにも注意します。一部のダイアログは期待どおりに機能します。その他には、タイトルがありません（つまり、タイトルを含むスパンは空です）が、閉じるボタンが表示されています。

私は何かが深刻に間違っていると思います、そしてそれは1.10.xの時ではないかもしれません。

しかし、さらに作業を進めた結果、タイトルが適切に設定されていない場合があり、それを修正した後、Xの閉じるボタンが本来の状態に戻りました。

以前は次のようにタイトルを設定していました。

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

このIDは私のコードには存在しませんが、明らかにac-popupおよびui-dialog-titleのjqueryによって作成されます。一種のクラッジ。しかし、私が言ったようにそれはもはや機能せず、代わりに以下を使用する必要があります：

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

それを行った後、ボタンの欠落の問題は改善されたようですが、それらが明確に関連しているかどうかはわかりません。

jquery-uiの後にブートストラップを読み込んでも、これを使用して修正できました：

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