Storm Design | Templates Exclusivos | Tutoriais de Web Design | Peça seu Template Exclusivo Grátis

Formulario de Contato em Modal

E ae pessoal o/
antes de começar, eu queria estar pedindo pra vocês se não entenderem algo ou estarem dando erro, comentem, pois eu acabei de aprender esse metódo kk xD


Primeiro, vocês vão em: Modelo > Editar Html. Procurem por:

<head>

E embaixo cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {   

    $(&#39;a[name=modal]&#39;).click(function(e) {
        e.preventDefault();
       
        var id = $(this).attr(&#39;href&#39;);
   
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
   
        $(&#39;#mask&#39;).css({&#39;width&#39;:maskWidth,&#39;height&#39;:maskHeight});

        $(&#39;#mask&#39;).fadeIn(1000);   
        $(&#39;#mask&#39;).fadeTo(&quot;slow&quot;,0.8);   
   
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
             
        $(id).css(&#39;top&#39;,  winH/2-$(id).height()/2);
        $(id).css(&#39;left&#39;, winW/2-$(id).width()/2);
   
        $(id).fadeIn(2000);
   
    });
   
    $(&#39;.window .close&#39;).click(function (e) {
        e.preventDefault();
       
        $(&#39;#mask&#39;).hide();
        $(&#39;.window&#39;).hide();
    });       
   
    $(&#39;#mask&#39;).click(function () {
        $(this).hide();
        $(&#39;.window&#39;).hide();
    });           
   
});

</script>

Logo depois, procurem po:

]]></b:skin>

 E acima dele:

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
  text-size: 20px;
}
 
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:600px;
  height:480px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:600px;
  height:480px;
  padding:10px;
  background-color:#ffffff;
}

.close{display:block; text-align:right;}

Então você procura por:

</body>

E então acima dele cole:


<div id='boxes'>

<div class='window' id='dialog'>
<a class='close' href='#'>Fechar [X]</a><br/>
<b> </b><br/> 
Código do Formulario
<!-- Máscara para cobrir a tela -->
  <div id='mask'/>

 Nota** Você pode estar criando um formulário em Woofu Google Docs...

0 comentários:

Postar um comentário