1

Estou tentando alterar o css de um loading via javascript.

O element está como display:none e quando vou submeter altero esse elemento para display:block e o mesmo aparece na tela.

A questão é que quando testado no Safari do Mac simplesmente não funciona, já tentei alterar a classe, entre outras tentativas, mas não funciona.

Alguém já passou por isso?

Segue o trecho do código em questão: https://jsfiddle.net/pauloflesch/xpvt214o/24323/

Desde já agradeço.

5
  • Isso aí não deveria acontecer. Coloca seu código na questão pra podermos avaliar melhor, por favor. Se possível crie um Fiddle ou um StackSnippet.
    – Phiter
    Commented 29/03/2018 às 23:34
  • Sem código fica impossível de saber o problema.
    – Sam
    Commented 30/03/2018 às 1:00
  • @Phiter editei a pergunta e adicionei o código. Commented 2/04/2018 às 13:20
  • Já tentou substituir position:fixed por position:absolute para ver se funciona?
    – hugocsl
    Commented 2/04/2018 às 14:26
  • @hugocsl testei e não funcionou. Commented 2/04/2018 às 16:00

1 Resposta 1

0

Utilize os métodos abaixo:

classList.add() e classList.remove();

Exemplo:

$('#cadastro_pedido').click(function(){
		//document.getElementById('loading').setAttribute( "class", "loadingShow" );
		document.getElementById('loading').classList.add("loadingShow");
		document.getElementById('loading').classList.remove("loading");
		//document.getElementById('loading').style.display = 'block';
		var contador = 10;
		setInterval(function(){
			if(contador < 90){
				document.getElementById('testePaulo').innerHTML= contador + '%';
				contador += Math.floor((Math.random() * 10) + 1);
			}
		},1000);
		//document.getElementById("formProj").submit();
	});
.loading{
			position: fixed;
			z-index: 99;
			background: rgba(255,255,255,0.6);
			width: 100%;
			height: 100%;
			display: none;
		}
			.loadingShow{
			position: fixed;
			z-index: 99;
			background: rgba(255,255,255,0.6);
			width: 100%;
			height: 100%;
			display: block !important;
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading" class="loading">
		<div style="color:#5fbbfb;font-size: 70px;width: 100%;text-align: center;float: left;position: fixed;top:35%;" id="testePaulo"></div>
	</div>
	<a href="#" class="btn btn-success" disabled="disabled" id="cadastro_pedido" >Cadastrar Pedido</a>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .