Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Window.alert() personalizado

04-06-2007 11:58

Esse é um script personalizado do window.alert().

Você pode adicionar figuras, cores, etc...

Nesse exemplo, estarei verificando 2 campos: nome email, que quando vazios, retornaram o window.alert() personalizado.

Para exibir uma caixa de alerta com divs, baixe esse plugin jQuery confira http://lobianijs.com/site/lobibox

PARTE EM CSS

<style type="text/css"> /* div para obrigar o OK na caixa */ .div{ position:absolute; top:0; left:0; z-index:1; background-color:#ffffff; filter:Alpha(Opacity=0,FinishOpacity=0,Style=2,StartX=100,StartY=100,FinishX=100,FinishY=1); -moz-opacity:0.0;opacity:0.0; width:100%; height:100%; display:none; }   /* esse é o div da caixa de alerta */ .div2 { position:absolute; top:45%; left:45%; z-index:2; display:none; }   /* esse é o div onde vai aparecer o conteúdo */ .conteudo { background-color:#f9f9f9; width:100px; height:100px; font-family:arial; font-size:8pt; color:#696969; padding: 5px 5px 5px 5px; border:1px solid #cccccc; } </style>

PARTE EM JAVASCRIPT

<script> function verifica() { var ident = document.form;   /* verificando campo nome, se vazio */ if(ident.nome.value=="") { document.getElementById("div").style.display="block"; document.getElementById("div2").style.display="block"; document.getElementById("alerta").innerHTML="Coloque o nome"; return false; }   /* verificando campo e-mail, se vazio */ if(ident.email.value=="") { document.getElementById("div").style.display="block"; document.getElementById("div2").style.display="block"; document.getElementById("alerta").innerHTML="Coloque o e-mail"; return false; }   }   /* fecha a caixa de alerta */ function fechar_alerta() { document.getElementById("div").style.display="none"; document.getElementById("div2").style.display="none"; } </script>

PARTE EM HTML

<form name="form" method="POST" onSubmit="return verifica();"> nome <input type="text" name="nome" value=""> <br> email <input type="text" name="email" value=""> <input type="submit">   <div class="div" id="div"></div>   <div class="div2" id="div2" style="display:none;"> <table> <tr> <td valign="center" align="center" class="conteudo" id="alerta"></td> </td> </tr> <tr><td valign="center" align="center"><input type="button" value="OK" onClick="fechar_alerta()"></td></tr> </table> </div>

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado