Div Transparente

Front-end
#1

Fala Feras

tenho que fazer que quando o usuario clica em um botão aparece uma div transparente o impedindo de clicar novamente no botão até terminar e execução

e a pagina fazer o redirecionamento para outra pagina montei esse codigo abaixo porém não esta funcionando conforme deve alguém pode ajudar ?

Meu HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aplicando Transpar&ecirc;ncia</title>
<style>
<!--
    @import 'style.css';
-->
</style>
</head>
<body>
     <div class="alpha">
         <a href="images/ajax-loader.gif" rel="lightbox"><img src="images/bt_cadastrar.gif" alt="Cadastrar" /></a>
     </div>
</body>
</html>

Meu CSS


body {
     background-color:Lightblue;
     font-family:"Trebuchet MS", Tahoma, Verdana;
     font-size:10px;
     }
* { margin:0; padding:0; } /* Retirando as margens e paddings de todos os objetos */
.alpha {
     width:400px;
     padding:5px;
     text-align:justify;
     }
.alpha img {
     float:left;
     margin-right:5px;
     border:1px solid #000;
     }
.alpha h1 {
     font-size:24px;
     font-weight:bold;
     }
.borda {
     border:2px solid #666;
     width:410px; /* Corrigindo o BoxModel com 400px de largura e padding de 5 px */
     margin:50px auto 0 auto;
     }

/* Aplicando a transparência apenas no IE 6 */
* html body .alpha {
     background-color:#FFF;
     filter: alpha(opacity=60); /* Já q o FF não recebe, não vamos declarar o ?moz-opacity */
	-moz-opacity : 0.6; /*Para ficar transparente no FF*/
     }

/* Aplicando a background-image para os outros navegadores */
html > body .alpha {
     background-image:url(alpha.png);
     }
#2

Use a Jquery.

#3

Cara se fosse para usar Jquery teria postado alguma coisa do genero ai

mais apenas quero uma solução para o problema que citei seguindo o mesmo raciocinio

#4

[quote=robsonsan]Cara se fosse para usar Jquery teria postado alguma coisa do genero ai

mais apenas quero uma solução para o problema que citei seguindo o mesmo raciocinio[/quote]

Cara,

Posso ter entendido mal sua resposta, mas msm assim usar a Jquery é apenas uma opção dentre mts que poderá vir ser postada aqui para: [quote] alguém pode ajudar ? [/quote]

#5

bom dia,

Brother, vc está usando DWR ajax no projeto? Se estiver, o próprio DWRUtil tem uma função que executa exatamente isso…
DWRUtil.useLoadingMessage(); ou DWRUtil.useLoadingMessage(‘sua mensagem aqui’);

senão…

pode me dar mais detalhes do comportamento da DIV?
tipo, em javascript:

function dispatcher(){
 //antes de dar o submit do form
document.getElementById(id_sua_div).style.display='block';
frm.submit();
}
//e no onload da outra janela...
//acho q. dah para fazer assim
function init(){
window.opener.document.getElementById(id_sua_div).style.display='none';
}
  • espero ter ajudado.

[]'s

#6

DianaPJ não estou usando ajax estou usando css com javaScript

vou te passar mais detalhes e mostrar meu código porque o que esta acima e um exemplo que montei para testar e por no codigo final olha só

tenho na jsp o meu botão que faz o submit

							<html:submit property="submit=exibirTermoResponsabilidade" styleClass="btnCadastrar" value=" " style="alpha" onclick="return escrever(1);">
								<bean:message key="<%=ConstantesInterfaceSistemaRecebimento.BOTAO_GERAL_INSERIR%>"/>
							</html:submit>

na mesma jsp essa função javaScript para exibir a DIV

	function escrever(el) {
		var objTexto = document.getElementById("texto"+el);
		var texto1 = document.getElementById("texto1");
	
		//Apagando todos os divs existentes		
		texto1.style.display = "none";
	
		//Exibindo apenas o div que foi passado como parâmetro na função.
		objTexto.style.display = "block";
		}

aqui a DIV com a imagem para quando for clicado no botão exibir a imagem para o usuario aguardar o processamento da pagina

						<td width="70%" valign="top">
							<div id="texto1" style="position:relative; display:none"><img src="imgs/ajax-loader.gif"/></div>	
				                </td>
#7

Feras consegui uma solução e simples irei postar um exemplo basta a pessoa com o mesmo problema adaptar ao seu codigo

só copiar e colar que esta mastigado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strinct.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Div posição fixa</title>                 
<style type="text/css">
html,body
{
        overflow: auto;
        height: 100%;
        margin: 0px;
        padding: 0px;
}
body
{
        font: 76% verdana, arial, sans-serif;
}
.transparencia
{
        position: fixed !important;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10w;
        width: 100%;
        height:100%;
        opacity: 0.6;
        color: #000000;
        background-color: #E0E0E0;      
		display: none;
}

*.transparencia{
        filter: alpha(opacity = 60);
}

.fechar
{
        position: absolute;
        width: 200px;
        height: 200px;
        margin-top: 30%;
        margin-left: 30%;
        z-index: 15;
}

</style>
</head>
	<body>       
        <div class="fechar">
                <input type="button" value="Fechar" onclick="this.style.display = 'none';document.getElementById('div1').style.display = 'inline';document.body.style.overflow='auto';" />
        </div>
		 <div id="div1" class="transparencia"></div>
	</body>
</html>
#8