Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Amc Cotoz

Jquery - Modal Window

Por , em Desenvolvimento frontend

Recommended Posts

Amc Cotoz    0

Amc Cotoz
Postado

Boa tarde,

 

Preciso da vossa ajuda porque eu não consigo encontrar o problema.

 

Estou a tentar fazer uma modal window em Jquery só que o problema é que a mask que estou a criar está a ficar por cima do formulário. Eu queria a mask como fundo e o formulário por cima dessa mesma mask para a conseguir editar e ver em perfeição.

 

Em baixo mostro-vos o código HTML + Jquery.

 

<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-size: 11px;  
   font-family: Arial,  Verdana, Helvetica, sans-serif;  
}
#mask {
 position:absolute;
 left:0;
 top:0;
 width: 0px;
 height: 0px;
 z-index:9000;
 background-color:#000;
 display:none;
}
#tudo {
   width: 600px;  
position: absolute;
display: none;
background-color: #FFF;
}
span {
font-style: italic;
font-size: 10px;
}
#formulario label{  
   display: block;  
font-weight: bold;
line-height: 15px;
color: #666;
}  
#formulario input {
width: 220px;  
padding: 6px;
border: 1px solid #CCC;
color: #999;	
}
#formulario #mensagem {
width: 535px;  
height: 100px;
border: 1px solid #CCC;
color: #999;	
}
#formulario #enviar {
top: 4px;
position: relative;
width: 90px;
background: #09C;
color: #fff;
   border: 0;  
} 
#formulario #enviar:hover {
background: #09F;
} 
#tudo a#fechar {
left: 538px;
position: relative;
font-size: 10px;  
   font-family: Arial,  Verdana, Helvetica, sans-serif;  
font-style: normal;
text-decoration: none;
font-weight: bold;
color: #09C;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>

<body>
<a id="abrir" href="#">Abrir</a>
<div id="tudo">
<div >
   	<a id="fechar" href="#">X</a>
   </div>
<form method="post" id="formulario" action="verificar.php">
       <div>
               <label for="nome">Nome</label>
               <input id="nome" name="nome" type="text" />
			<span id="nomeInfo">Qual é o teu nome?</span>
       </div>
       <div>
             <label for="email">E-mail</label>
              <input id="email" name="email" type="text" />
              <span id="emailInfo">Preenche com um email válido, vais precisar dele para fazer login!</span>
       </div>
       <div>
               <label for="assunto">Assunto</label>
               <input id="assunto" name="assunto" type="assunto" />
               <span id="assuntoInfo">Por favor preenche o assunto do contacto</span>
       </div>
       <div>
               <label for="mensagem">Mensagem</label>
               <textarea id="mensagem" name="mensagem" cols="" rows=""></textarea>  
       </div>
       <div>
       		<input id="enviar" name="enviar" type="submit" value="Enviar" />
       </div>
</form>
</div>
<div id="mask"></div>
</div>
</body>
</html>

 

<script>
$(document).ready(function() {
var width = $(window).width();
var height = $(window).height();
$("#abrir").click(function() {
	var janela_width = $("#tudo").width();
	var janela_height = $("#tudo").height();
	var top = (height-janela_height) / 2;
	var left = (width-janela_width) / 2;
	$("#tudo").show();
	$("#tudo").css({'top' : top , 'left' : left});
	$("#mask").css({'top' : top , 'left' : left});
	$('#mask').css({'width':janela_width,'height':janela_height});
	$('#mask').fadeIn(1000);	
	$('#mask').fadeTo("slow",0.5);	
});
});
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você terá q trabalhar com z-index

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito