jQueryUIのdialogでヘッダ部分を表示しない

jQuery UIのdialogのヘッダ部分はデフォルトの表示だと結構存在感があります

場合によっては表示したくない場合もあるかもしれないので非表示にする方法を調べてみました。

いろいろ方法が考えられますが、ヘッダ部分はui-dialog-titlebarというclassがついてますので、cssで非表示にできるようです。

ダイアログを作成するときに、オプションでclassを設定します。
noTitleDialogというclassをつけてみました。

$('#dialog').dialog({
                title: 'メッセージ',
                autoOpen: false,
                dialogClass: 'noTitleDialog',
                buttons: [{'text': 'はい',
                                'click': function(){//処理 }},
                               {'text': 'いいえ',
                                'click': function(){//処理 }}]
            });

あとはcssでdisplay:none;を設定します

.noTitleDialog .ui-dialog-titlebar {display:none;}

こんな感じになりました。

ただし、ひっぱれる部分がなくなりますのでdraggable: trueを渡していたとしてもドラッグできなくなりますし、titleオプションで渡した"メッセージ"という文言も無意味になります。