segunda-feira, 17 de março de 2014

[Tutorial] Jquery - Popup Message

Que tal fazer uma mensagem popup simples e bonita como essa de baixo?


É mais fácil do que você pode imaginar com JQuery e o jquery.blockUI.js plugin. Você pode fazer o download do plugin jquery.blockUI.js aqui. Agora vamos criar essa página:



1.<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
2. 
3.<script type="text/javascript" src="jquery.blockUI.js">
4. 
5.</script>

Você deve adicionar a biblioteca do JQuery e a jquery.blockUI.js plugin em sua página web. Vamos criar um botão que quando pressionado irá apresentar essa mensagem popup. Adicione o seguinte input button na seção do body de sua página.

1.<input type="button" value="press" id="press" />

E o seguinte Script na seção do head:

1.<script type="text/javascript">
2.$(document).ready(function() {
3.$('#press').click(function() {
4.$.growlUI(null'Sample message');
5.});
6.});
7.</script>

O $.growlUI é a função responsável por mostrar o popup na tela. Agora abra a página em um browser e veja o resultado.