Imagem carregando - resolvido

Front-end
, , ,
#1

Como fazer para que está imagem fique centralizada ?

Como fazer quando ela aparecer, ter um outro div com o tamanho da tela, que impede de clicar em qualquer parte da tela.

imagemFormulario
imagemFormulario.png852×532 14.7 KB

Código css

<style type="text/css">
.carregando {
	color: #666;
	display: none;
}

div.img {
	position: absolute;
	width: 150px;
	height: 70px
}

div.img>img {
	width: 100%;
	height: 100%
}

div.img>div {
	position: absolute;
	left: 50%;
	margin-left: -120px;
	top: 50%;
	margin-top: -75px;
	background-color: black;
	width: 50%;
	height: 50%;
	color: #FFF;
}
</style>

html

<div class="carregando img">
<img src="http://goo.gl/prjII7" width="150" height="70" id="imgpos" />
</div>
#2

Pode pesquisar que tem vários prontos, um exemplo: http://malsup.com/jquery/block/#demos

#3

Obrigado.

Não estou utilizando mais este css que informei. Sim o jquery.blockUI.js.

Agora a ação de salvar esta assim:

var request;
$("#codigoForm").submit(function(event) {
	$.blockUI({
		message : '<h1>Processando !!! </h1>',
	});
	var endereco = "/nota-fiscal-servico-web/";
	var formularioAtualizacao = endereco + "atualizacaoMonetaria/alterar/";
	var atualizacaoMonetariaItem = "atualizacaoMonetariaItem";
	var formularioTomador = endereco + "tomador/alterar/";
	var pessoaEndereco = "pessoaEndereco";
	event.preventDefault();
	if (request) {
		request.abort();
	}
	var formulario = endereco + nomeFormulario.name;
	var $form = $(this);
	var $inputs = $form.find("input, select, button, textarea");
	var serializedData = $form.serialize();
	$inputs.prop("disable", true);
	request = $.ajax({
		url : formulario + "Recurso/salvar",
		type : "post",
		data : serializedData
	});
	request.done(function(response, textStatus, jqXHR) {
		console.log(jqXHR);
	});
	request.fail(function(jqXHR, textStatus, errorThrown) {
		console.error("erro" + textStatus, errorThrown);
	});
	request.always(function(jqXHR) {
		$inputs.prop("disable", false);
		mensagemRetorno = jqXHR.indexOf("salvo");
		$.unblockUI(); // Desbloquear UI
		if (mensagemRetorno > -1) {
			toastr.info(jqXHR, "Sucesso ....");
			$('#codigoForm').trigger("reset");
			setTimeout(function() {
				tipoProcesso = formulario.indexOf(atualizacaoMonetariaItem)
				if (tipoProcesso > -1) {
					formulario = formularioAtualizacao + $inputs[2].value;
				} else {
					pessoaEndereco = formulario.indexOf(pessoaEndereco)
					if (pessoaEndereco > -1) {
						formulario = formularioTomador + $inputs[2].value;
					}
				}
				// aqui é o codigo que vai ser executado depois do tempo
				// determinado no segundo parametro
				window.location.assign(formulario);
				// o tempo que vai levar ate a funcao ser executada, em
				// milisegundos
			}, 1000);
		} else {
			toastr.error(jqXHR, "Error ...");
		}
	});
});