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>
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によって生成されます通常の機能を達成するための悪い/不必要な選択のように思えます。
これは、コードのその部分を生成するために使用される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/07/22 -
jquery-uiをjqueryと混同しないでください。 BootstrapのJavaScriptは以前にjQueryをロードする必要がありますが、jQuery-UIには依存しません。そのため、jquery-ui.jsはbootstrap.min.jsの後にロードできますが、jquery.jsは常にBootstrapの前にロードする必要があります。
これは一番の答えに対するコメントですが、私はそれが私が問題に答えるのを助けたのでそれ自身の答えの価値があると感じました。
BootstrapをJQuery UIの後に宣言したままにしたい場合（Bootstrapツールチップを使用したいのでこれを行いました）、次のように宣言すると（$(document).readyの後に宣言した）ボタンが再び表示されます（ https：/） /stackoverflow.com/a/23428433/466087 ）
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バージョンでは、ダイアログを閉じるボタンがありません。ボタンのタグだけがあります、spanのuiアイコンはありません。
以前のバージョンをダウンロードしたところ、閉じるボタンのXが表示されました。
私は3つの修正を見つけました：
- あなたは最初に単にブートストラップをロードすることができます。そして彼らはjquery-uiをロードします。しかし、それは良い考えではありません。コンソールにエラーが表示されるでしょう。
この：
var bootstrapButton = $.fn.button.noConflict(); $.fn.bootstrapBtn = bootstrapButton;に役立ちます。しかし他のボタンはひどく見えます。そして今、私たちはブートストラップボタンを持っていません。
私はただブートストラップスタイルを使いたいだけでなく、アイコン付きの閉じるボタンが欲しいのです。私はフォローしました：
.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で手動でこの画像（あなたはそれを見つけることができます ここ ）を交換しようとしました私のアプリとvoilá上のフォルダ、問題は解決しました！
これが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を持っていることを確認してください。 imagesフォルダには、jquery-uiの新規ダウンロードで見つかった画像が含まれている必要があります。
長い答え
私の問題は、私がすべてのcssファイルを単一のファイルにマージするためにgulpを使っているということです。それをするとき、私は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;
}
賢い人がかつて私を助けた。
ファイル...\cssが置かれているフォルダー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
閉じるアイコンが表示されます。
あなたが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>
私もこの問題を抱えています。これは、閉じるボタンに挿入されるコードです。
ボタンのstyle = "display：none："をオフにすると、閉じるボタンが表示されます。そのため、なんらかの理由でそのように表示されます。設定されつつあり、それを制御する方法がわかりません。そのため、これに対処するもう1つの方法は、単に表示を上書きすることです。しかしそれをする方法を見ないでください。
私は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);
それをした後、私は彼らが確実に関連しているかどうか私にはわかりませんが、行方不明のボタンの問題はより良いようです。
足りないものを追加するだけです。
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>