прелоудер на jquery
 

Как сделать затемненный экран и прелоудер по центру пока не завершится аякс запрос

$('.menu_btn').each(function(){
get_menu($(this));
function get_menu(obj){
var value_menu = obj.find('input').val();
$.ajax({
	         url: "/site/get_menu",
	         type: "POST",
	         cache:true,
			 data: {data:value_menu},
			 beforeSend: function(){
	           $('.goods').html('<img id="imgcode" src="templates/store/1/img/482.gif">');
	        },
	         success: function(data){
			 /* $('#dataUpload').html(data); */
	         obj.parent('.menu_btn_area').find(".goods").html(data);
			 
	         }
	       });
}
});

При всем при этом чтобы не один элемент страницы не был активным во время прелоудера

CSS:

.bg {
   background: #000;
   display: none;
   height: 100%;
   left: 0%;
   opacity: 0.7;
   position: fixed;
   top: 0%;
   width: 100%;
   z-index: 5;
}

.loading {
   bottom: 0%;
   left: 0%;
   margin: auto;
   position: fixed;
   right: 0%;
   top: 0%;
   z-index: 6;
}

HTML:

<div class="bg"></div>
<img alt="" class="loading" src="loading.gif" />

JS:

function preLoader(a) {
   $('.bg, .loading')[a ? 'fadeIn' : 'fadeOut'](500);
}

/***********************/

preLoader(true);
$.post('test.php', {foo: true}, function(data) {
   preLoader(false);
});