O pop-up pode ser usado para diversos fins, desde uma simples janela customizada, para formulários, até uma janela com poderes de deixar o usuário louco exibindo diversas propagandas.
No exemplo a seguir vou ter maior cautela e mostrar-lhes uma janela pop-up padrão para uso em formulário, que pode ser uma formulário de envio de e-mail.
para iniciarmos nosso exemplo tenha em mente que precisa de uma pagina (“html”) para fazer a chamada ao pop-up e outra que será o formulário (“html”) a ser exibido.
Pagina chamadora do pop-up:
--
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd";Página que chama pop-up<script type="text/javascript" language="JavaScript">function
abrir(){ window.open("formulario.html", "Janela", "height=500,width=200,scrollbars=No,location=No");
}<a href="JavaScript:abrir()">link para chamada ao pop-up</a>
--
Neste outro conjunto de código deve estar o formulário para envio de e-mail, lembre-se estou mostrando como se cria o pop-up e um formulário de e-mail e não a rotina de envio de de e-mail , esta abordaremos em outro momento.
Formulário a ser usado dentro do pop-up:
--
< !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>
<title> Pop-up - Formulario </title>
<style type="text/css">
.auto-style1 {
text-align: left;
}
.auto-style2 {
text-align: right;
}
.auto-style3 {
text-align: center;
}
</style>
</head>
<body style="width: 581px; height: 431px;">
<form action="post" name="form" style="height: 410px; width: 389px;" >
<table style="width: 82%; height: 397px;">
<tr>
<td>Para: (enderço de e-mail)</td>
</tr>
<tr>
<td>
<input type="text" name="text2" value="" style="width: 220px; height: 60px;" /></td>
</tr>
<tr>
<td>Nome: (nome do seu amigo)</td>
</tr>
<tr>
<td>
<input type="text" name="text1" value="" style="width: 220px; height: 25px;" /></td>
</tr>
<tr>
<td style="height: 23px">
De: (seu email)</td>
</tr>
<tr>
<td style="height: 23px">
<input type="text" name="text3" value="" style="width: 220px; height: 60px;" /></td>
</tr>
<tr>
<td>Nome: (seu nome)</td>
</tr>
<tr>
<td><input type="text" name="text4" value="" style="width: 220px" /></td>
</tr>
<tr>
<td>Nota:</td>
</tr>
<tr>
<td>
<input type="text" name="text5" value="" style="width: 220px; height: 65px;" /></td>
</tr>
<tr>
<td class="auto-style2">
<h6 class="auto-style3">máximo de 255 caracteres</h6>
</td>
</tr>
<tr>
<td class="auto-style1">
<input type="submit" name="btnEnviar" value="Enviar" style="width: 65px" />
<input type="reset" name="btnCancelar" value="Cancelar" style="width: 68px" /></td>
</tr>
</table>
</form>
</body>
</html>
--
Lembre-se, o pop-up pode ser usado para inserir qualquer informação dentro, mas busque usa-ló para a ajuda seu usuário
