12

jQueryダイアログのタイトルバーを削除したい。しかし、私はそこに閉じる（クロス）ボタンを保持したいと思います。

私はこの質問を見つけました：

jquery UIダイアログ：タイトルバーなしで初期化する方法は？

そこの答えはタイトルバーを削除する方法を説明していますが、そうすると閉じるボタンも削除されます。他のリンクもありますが、それらはすべて同じです。タイトルバー全体と閉じるボタンを非表示にするだけです。

閉じるボタンを押したままタイトルバーを非表示にする解決策はありますか？

4

5 に答える 5

5

これを使用して、閉じるボタンではなく、jQueryダイアログのタイトルバーを削除します

 $(function() {
    $( "#dialog" ).dialog();
    $("#ui-dialog-title-dialog").hide();
    $(".ui-dialog-titlebar").removeClass('ui-widget-header');
 });

新しいバージョンのjqueryUI>1.10.3

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});
于 2012-08-19T07:21:47.687 に答える
3

これも機能します

$(function() {
$( "#dialog" ).dialog();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
于 2013-02-25T10:52:13.930 に答える
2

上記の手法で閉じるアイコンの付いたバーを削除してから、自分で閉じるアイコンを追加することができます。

CSS：

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML：

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//このdivをコンテンツを保持しているdivに追加します

JS：

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });
于 2013-02-28T15:28:36.717 に答える
0

最も簡単で堅牢な解決策（ここにある他の解決策は、変更される可能性があるものを想定しているため、1.10.3では機能しません）は、期待するCSSスタイルを直接設定することだと思います。

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});
于 2014-04-08T09:30:34.493 に答える
0

ここで、属性の変更を提案し、background-color役に立たなかった他の解決策を試しました。background私にとっての解決策は、属性を透過に変更することでした。

.ui-dialog-titlebar { background: transparent; border: 0 none; }

于 2017-07-31T20:39:03.480 に答える