Quem nunca exibiu uma mensagem em javascript para o usuário com alert('Sucesso'); que jogue a primeira pedra! É rápido e prático, tenho que adimitir. Porém nesse artigo vou apresentar algo melhor: o componente Dialog da biblioteca JQueryUI.
Veja abaixo como funciona:
Bem mais atraente do que a caixa de dialog do alert, que difere entre os browsers.
Essa caixa ainda pode ser arrastada e redimencionada.
Veja como a implementação é fácil:
<html>
<head>
<!--IMPORTAÇÕES NECESSÁRIAS-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="Titulo da Caixa">
<p>Ut a placerat diam. Suspendisse euismod nulla ac quam tristique eleifend iaculis dolor luctus. Aliquam tristique rhoncus placerat. Ut adipiscing lorem pharetra tortor viverra quis ornare mi pharetra. Maecenas a massa ante, a accumsan leo. Donec ac turpis et arcu tincidunt tincidunt. Etiam sed nunc nulla. Mauris posuere augue sapien.</p>
</div>
<script>
$( "#dialog" ).dialog();
</script>
</body>
</html>
O conteúdo da div com id='dialog' será o conteúdo do dialogo e o atributo title dessa div será o título do diálogo, bem simples. E o grande diferencial em relação ao tradicional alert(), é que podemos inserir HTML livremente dentro do Dialog, tornando assim nossos diálogos mais funcionais e estilizados. No exemplo dessa página eu coloquei um UL com itens LI, mas poderia ser uma imagem ou qualquer outra coisa.
Atenciosamente,
Gustavo Marques
Boa tarde. No exemplo acima, ao clicar no botão aparece a caixa de mensagem estilizado em AZUL. Como faço pra alterar essa cor, já que o padrão é cinza? Desde já agradeço (danielss2202@hotmail.com)
ResponderExcluirÉ só alterar o arquivo css. Esse azul é definido na linha que importa o arquivo css do jquery ui. Eu usei o http://code.jquery.com/ui/1.9.2/themes/redmond/jquery-ui.css
ExcluirPorém existem outros temas, veja a página http://jqueryui.com/themeroller/ e clique na aba Gallery para ver os temas disponíveis. Então é só substituir o nome 'redmond' pelo nome do tema que voce escolheu.
Gustavo