jQuery Mobile、transparent black overlay effect

Question

私は現在Phonegapアプリケーション用にjQuery Mobileを使用していますが、どのようにしてページの内容だけに半透明な黒いオーバーレイを追加できるのでしょうか？私はそれがトップとボトムのナビゲーションバーを覆うことを望んでいません。これはAJAX呼び出しをサーバーに置いているときに発生します。

この効果は、検索バーに入力したときのTwitter iOSアプリに似ています。

$('#search').ajaxStart(function() { 
    // what do I put here? 
}); 

ご協力いただきありがとうございます。とても有難い。

Answer 1

私はmeagarに同意します（あなたのコメントに回答をして受け入れられるようにしてください）。しかし、overlay divが常に存在する（ただし隠れている）ようにしたい場合は、その代わりに、その場で：

$('#search').ajaxStart(function() { 
    $('#content').wrap('<div class="overlay" />'); 
}); 

（#contentはあなたのコンテンツラッパーと.overlayは私が私のために選択することが起こった名前です呼び出すために起こるものは何でも表し、簡単に変更！）

たびAjaxの完全なコールバック火災（これはまた、.hide()がmeagarのsu ggestion）、これをもう一度これを使ってラップ解除してください：

$('#content').unwrap(); 

残りはCSSです。

.overlay { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0,0,0,0.7); 
} 

注意してください...これは実際にあなたのページにあるものに応じて、正しいCSSアプローチではないかもしれません。基本的な考え方は、あなたのコンテンツ領域だけに広がってほしいということですが、トラップがあります！浮動小数点、いくつかのものの絶対的な位置付け...すべてはあなたのオーバーレイがコンテンツエリアだけをカバーしないように努力します。あなたがその問題に遭遇した場合、それは別のSOの質問です。 ;-)

JSFiddle：http://jsfiddle.net/Ff5wV/