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.
Nenhum comentário:
Postar um comentário