jQuery Mobile，透明的黑色覆蓋效果

我目前使用jQuery Mobile的Phonegap應用程序，我想知道如何添加一個只覆蓋頁面內容的半透明黑色覆蓋圖。我不希望它覆蓋頂部和底部的導航欄。當我將AJAX調用放到服務器時，會發生這種情況。jQuery Mobile，透明的黑色覆蓋效果

當您在搜索欄中輸入內容時，此效果與Twitter iOS應用類似。

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

謝謝大家的幫助！非常感激。

2012-05-06 Karl

完全取決於你的頁面的佈局方式，但基本上你想一個div追加到文檔，樣式，以便它符合您的標準（半透明，正上方內容但低於導航欄），然後有條件地顯示/隱藏它。您發佈的代碼中缺少的唯一一行是$（'＃my-div'）。show（）'。其餘的是CSS。 – meagar

我同意meagar（誰應該讓他的評論一個答案，以便它可以被接受！），但也會補充說，如果你不想覆蓋div總是存在（但只是隱藏），你可以添加它在飛行，而不是：

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

（#content代表任何你碰巧打電話給你的內容包裝和.overlay是我碰巧選擇我的名字;輕易改變！）

每當阿賈克斯完成回調火災（這也將是將用於meagar的su只是用這個解包它：

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

其餘的是CSS。

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

請記住......這實際上可能不是正確的CSS方法，具體取決於您網頁上的內容。基本的想法是，你想讓它跨越你的內容區域，但有陷阱！漂浮，某些事物的絕對定位......所有合謀使你的覆蓋不僅僅覆蓋內容區域。如果你遇到這個麻煩，那麼它是一個單獨的SO問題。 ;-)

2012-05-06 16:41:13

謝謝，這正是我所需要的。 – Karl

回答