Abrir y cerrar formulario de correo en ventana tipo popup con jquery

   Este post está relacionado con el anterior sobre enviar formulario de correo en segundo plano, en este voy a hablar sobre como abrir un div que contiene un formulario de correo, tipo popup o, tal vez mejor, ventana modal. En esta página sobre taller del automóvil tengo un formulario de correo oculto que se muestra al pinchar en un enlace. Intento minimizar el scroll de la página para mostrar la información. Me parece que es mejor mostrar toda la información posible moviendo la barra del scroll lo menos posible. Y, en este caso, me parecía que incluir un formulario visible recargaría demasiado la página. Voy a intentar explicar cómo mostrar y ocultar una ventana, que contiene un formulario de correo, usando jQuery.

   Primero, el código CSS:

/*damos forma y posición al div formulario que, por defecto, estará oculto*/
 #formulario{
    display:none;
    position:absolute;
    top: 50%;
    left: 30%;
    height:500px;
    width:450px;
    padding:0px 20px 0px 20px;
    background-color: #929EE8;
    filter:alpha(opacity=90);
    border: 6px solid #8FB5C1; 
    -moz-border-radius:15px; 
    -webkit-border-radius:15px; 
    border-radius:15px;
    box-shadow: 10px 10px 15px #333;;
   -webkit-box-shadow: 10px 10px 15px #333;
   -moz-box-shadow: 10px 10px 15px #333;
    z-index:5000;
}
/*damos forma y posición al botón de envío*/
#submit_button {
    width: 100px;
    height:50px;
    font-size:1.3em;
    background-color:#333;
    color:#FFF;
    border:1px solid;
    display:block;
    float:right;
    margin-bottom:0px;
    margin-right:6px;
    background-color:#CCC;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}
/*cambiamos el color del botón de envío al pasar el puntero por encima*/
#submit_button:hover {
    background-color:#666;
}
/*ponemos un borde a los campos input y textarea del formulario*/
input, textarea {border: 1px solid;}
/*posicionamos el botón cerrar*/
.boton_cerrar {
    background:url(images/close.png) 1px 1px no-repeat;
    float:right;
    width:33px;
    height:33px;
    cursor:pointer;
}
/*cambiamos el botón de cerrar al pasar el puntero por encima*/
.boton_cerrar:hover{
    background:url(images/close_hover.png) 1px 1px no-repeat;
    float:right;
    width:33px;
    height:33px;
    cursor:pointer;
}

   Lo siguiente, el código HTML:

<div id="right" style="font-size:1em;color:#000;">

Puede contactar con nosotros en los teléfonos 985xxxxxx, enviando un email a través de su cliente de correo a:<a href="mailto:contacto@empresa.com">contacto@talleresguadamia.com</a></p>
<p>o rellenando<a href="#" onclick="$('#formulario').fadeIn(700); enviamensaje();"> ESTE FORMULARIO</a></p><br />
</div>

<div id="formulario">

<div class="boton_cerrar" title="cerrar" onclick="$('#formulario').fadeOut(300);"></div>
<div style="clear:both;"></div>
<form id="myForm" action="enviarcorreo.php" method="post">
<p><label>Su nombre:<input name="nombre" id="nombre" size="40" MAXLENGTH="40" TYPE="TEXT" VALUE=""/></label></p>
<br />
<p><label>Su E-mail:<input name="mail" id="mail" size="40" MAXLENGTH="40" TYPE="TEXT" placeholder="micorreo@mail.com" VALUE=""/></label></p>
<br />
<p>Escriba su mensaje y pulse enviar<textarea name="mensaje" id="mensaje" ROWS=10 COLS=80 style="width: 340px; height: 150px;" ></TEXTAREA></p>
<p><input type="submit" id="submit_button" name="Submit" value="Enviar"/></p>
<div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>

</div>

   La clave está en onclick:  
onclick="$('#formulario').fadeIn(700); enviamensaje();"  
que nos mostrará el formulario y llamará a la función 'enviamensaje()', al pinchar en el enlace 'ESTE FORMULARIO' (en cuanto a la función 'enviamensaje()' leer este post). Y en onclick="$('#formulario').fadeOut(300);" que ocultará en formulario al pinchar en el botón cerrar. Como ya comenté en otros posts, es necesario incluir, entre los "HEAD" de nuestro HTML el archivo jQuery.