Question

I am currently using jQuery Mobile for a Phonegap application and I was wondering how could I add a black overlay that is semi transparent over only the content of a page. I don’t want it to cover the top and bottom navbars. This would happen while I place an AJAX call to the server.

This effect is similar to the Twitter iOS app, when you are typing in the search bar.

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

Thank you for your help everyone! Much appreciated.

Answer 1

I agree with meagar (who should make his comment an answer so it can be accepted!) but would also add that if you don’t want the overlay div to always be present (but just hidden), you can add it on the fly instead:

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

(#content represents whatever you happen to call your content wrapper and .overlay is the name I happened to choose for mine; easily changed!)

Whenever the Ajax complete callback fires (which will also be where the .hide() would be used in meagar’s suggestion), just unwrap it again with this:

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

The rest is CSS.

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

Keep in mind… this may not in fact be the right CSS approach, depending on what’s already on your page. The basic idea is that you want it to span just your content area, but there are traps! Floats, absolute positioning of some things… all conspire to make your overlay not cover only the content area. If you run into that trouble, it’s a separate SO question though. 😉

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