1

現在、Phonegap アプリケーションに jQuery Mobile を使用していますが、ページのコンテンツのみを半透明にする黒いオーバーレイを追加するにはどうすればよいか考えていました。上下のナビゲーションバーを覆いたくありません。これは、サーバーに AJAX 呼び出しを行うときに発生します。

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

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

みなさん、お世話になりました！とても有難い。

4

1 に答える 1

2

私は meagar に同意します (コメントが受け入れられるように、彼のコメントを回答にする必要があります!) が、オーバーレイ div を常に存在させたくない (ただし非表示にする) 場合は、その場で追加できることも付け加えます。代わりは：

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

(#contentたまたまコンテンツ ラッパーと呼んでいたものを表し、.overlayたまたま私が選んだ名前です。簡単に変更できます!)

Ajax の完全なコールバックが発生するたびに (これは.hide()megar の提案で使用される場所でもあります)、次のように再度アンラップします。

$('#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/

于 2012-05-06T16:41:13.000 に答える