jqueryモバイルダイアログをカスタマイズする方法

Question

ダイアログボックスのデフォルトの書式を削除して自分のCSSを適用するにはどうすればよいですか？

私の試みは非常にうまく機能していない

...

<div data-role="dialog" id="confirm-clear" class="dialog-custom" > 
    <div data-role="content" > 
     <p>Some text.</p> 
     <p><a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a></p> 
    </div> 
</div> 

EDIT：

.ui-dialog.dialog-custom { 

background: repeat scroll 0 0 rgba(0,0,0,.5); 

height:200px; /* this doesn't do anything */ 
} 

Answer 1

jQMは、そのテーマを達成するために様々なスタイルを使用して、例えば：私のCSSに そして、 Webkitグラジエント、バックグラウンド位置オフセットのある背景画像また、divにいくつかの要素をラップしたり、レイアウトにスパンなどを挿入したりします。

開始するには、Chromeの開発ツールなどのデバッガを使用し、ダイアログボックスを調べる必要があります。計算されたスタイルでは、スタイルとオーバーライドされているかどうか、その効果を確認できます。スタイルが有効になるまで、jQMの挿入や削除を行うこともできます。

は、今あなたが使ってjQMのスタイルを上書きすることができます！重要な、またはjQMのCSSファイルを変性する

Answer 2

CSSは、デフォルトでは最もユニークなセレクタを使用しています、とjQuery Mobileは、おそらくより多くのユニークなセレクタを使用しています。あなたのCSSの宣言が使用されていることを確認する!importantキーワードを使用することができます。

.ui-dialog.dialog-custom { 
    background : repeat scroll 0 0 rgba(0,0,0,.5); 
    height  :200px !important; 
} 

あなたはクローム開発ツールやFirebugのような開発ツールを持つ要素を検査した場合、あなたはどのようなスタイルが適用されている参照してどのようなCSSルール彼らすることができますから来る。これにより、既存のフレームワークにスタイルを追加する最適な方法を決定するのに役立ちます。

私はダイアログについてはわかりませんが、ページウィジェットの場合、要素のCSSプロパティはmin-height jQMフレームワークで変更されています。これを回避するには、jQM resizeダイアログのイベントハンドラを上書きします。