jQueryのダイアログボックスから十字ボタンのないタイトルバーを削除

Question

私はこの質問に対して複数の回答を見ましたが、その作業を見つけることができませんでした。

閉じるボタンを押したままjQueryUIダイアログボックスからタイトルバーを削除するにはどうすればよいですか？

これを試しても機能しません。また、それは良い解決策ではありません。

$("#example").dialog(dialogOpts); 
// remove the title bar 
$(".ui-dialog-titlebar").hide(); 

私はこれに続き、タイトルバーを取り除くことができました。しかし、これも閉じるボタンを取り除き、タイトルバーがないので、ダイアログボックスはもはやドラッグできません。

jquery UI dialog: how to initialize without a title bar?

は、私は、タイトルバーを取り除くために、ここでこのフィドルに従い、閉じるボタンを維持しようとしました。

http://jsfiddle.net/NK2qm/2/

しかし、これはすべてのダイアログボックスのためのCSSを変更し、ダイアログボックスの下に三角形を追加します。これは、ダイアログボックスの1つのクラスに対してのみ発生し、下部にある三角形を除いたものです。

誰かがこれを行う方法を示すフィドルでこの質問に返信できますか？

ありがとうございました。

Answer 1

解決策の1つは、jQueryUIダイアログの2番目のインスタンスを作成し、そのインスタンスをCSSで対象にすることです。

jsFiddle Demo

CSSは次のようになりますGoogle Chromeで

[aria-labelledby=ui-id-2].ui-dialog .ui-dialog-titlebar { 
    background:transparent; 
    border:none; 
} 
[aria-labelledby=ui-id-2].ui-dialog .ui-dialog-title { 
    display:none; 
} 

を、あなたは、タイトルバーを右クリックして、使用するaria-labelledby値を知っているとInspectを選択することができます。 左側のペインでHTMLを慎重に調べて、右側のペインでCSS値のチェックを外したり変更したりしてみてください。

.ui-resizable-handle .ui-resizable-sの::after疑似要素の下にある三角形が原因です。あなたは私がそれをスタイルしようとしていたのを見ることができますが、私はあなたが理解するためにそれを残すでしょう（または別のSOの質問をする）。