[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.