Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Imagem carregando

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.

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>

Código html:

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

Oi Guilherme, tudo bem?

Esse formulário é de qual vídeo exatamente?

Para centralizar coisas normalmente eu faço assim:

 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

Pra impedir o clique você teria que colocar z-index: 2 nesse .carregando. E z-index: 1 em uma div que ocupe 100% de tudo. Aí dá pra colocar uma transparência com rgba() no background-color.

Você vai ver em detalhes essas propriedades nos cursos de front-end aqui.

Espero ter ajudado e bons estudos,

Abcs!

solução!

Obrigado.

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

Estes exemplos: http://malsup.com/jquery/block/#demos1

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 ...");
            }
        });
    });