Usando jQuery UI para construção de modal dialog window

Exemplo de uso de dialog com jQuery UIWelcome to jQuery UI!

Esse foi um site que sempre me inspirou, principalmente por ser rico em exemplos e permitir criar aplicações com um design interessante e de modo simples e rápido.

Não digo que esta seja a melhor biblioteca para criação de interfaces gráficas com javascript nem a mais rápida, pois a avaliação desses quesitos depende de diversos fatores, como das características do navegador e da capacidade de processamento do lado do cliente web. Mas sua utilização tem permitido criar maior dinamismo e usabilidade em interfaces web com php de uma forma muito rápida, tanto em relação a sua implementação quanto ao tempo para entender seu funcionamento.

Não domino todos seus recursos, mas abaixo posto uma brincadeira com a função dialog dessa biblioteca, idéia que surgiu no comentário do meu post anterior.

O problema consiste em criar, com um único script, chamadas para janelas diferentes.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<script type="text/javascript">
$(function(){

	// Dialog
	$('.dialog').dialog({
		autoOpen: false,
		width: 600,
		buttons: {
		"Ok": function() {
		$(this).dialog("close");
		},
		"Cancel": function() {
		$(this).dialog("close");
		}
		}
	});

	// Dialog Link
	$('.dialog_link').click(function(){

	$('.dialog').dialog('close');

	var id_link = $(this).attr('id');
	var index = id_link.split('_');

	$('#txt_'+index[1]).dialog('open');

	return false;

	});

	//hover states on the static widgets
	$('.dialog_link, ul.icons li').hover(
	function() { $(this).addClass('ui-state-hover'); },
	function() { $(this).removeClass('ui-state-hover'); }
	);

});
</script>
<style type="text/css">

body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }

.dialog_link
            {
              padding: .4em 1em .4em 20px;
              text-decoration: none;position: relative;
            }

.dialog_link span.ui-icon
            {
               margin: 0 5px 0 0;position: absolute;
               left: .2em;top: 50%;margin-top: -8px;
            }

</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>

<h2>Dialog</h2>

<p><a href="#" id="lk_1" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 1</a></p>
<br>
<p><a href="#" id="lk_2" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 2</a></p>
<br>
<p><a href="#" id="lk_3" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 3</a></p>
<br>
<p><a href="#" id="lk_4" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 4</a></p>
<br>
<p><a href="#" id="lk_5" class="dialog_link ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog 5</a></p>

<div title="Dialog Title 1" id="txt_1"  class="dialog">
<p>Lorem ipsum dolor sit amet,  Nulla nec tortor.
Donec id elit quis purus consectetur consequat. </p>
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet,
venenatis ornare, ultrices ut, nisi. Aliquam ante.
Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod,
vulputate ac, facilisis id, sem. Morbi in orci. </p>
</div>

<div title="Dialog Title 2" id="txt_2" class="dialog">
<p>Nulla purus lacus, pulvinar vel, malesuada ac,
mattis nec, quam. Nam molestie scelerisque quam.
Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur
adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede.
Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
</div>

<div title="Dialog Title 3" id="txt_3" class="dialog">
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare,
ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit.
Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam.
Nam molestie scelerisque quam. </p>
</div>

<div title="Dialog Title 4 " id="txt_4" class="dialog">
<p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit.
Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor.
Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor,
dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p>
</div>

<div title="Dialog Title 5" id="txt_5" class="dialog">
<p>Suspendisse scelerisque dui nec velit.
Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.
Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie
scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur
adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede.
Nulla nec tortor. Donec id elit quis purus consectetur consequat.
Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare,
ultrices ut, nisi. </p>
</div>

</body>
</html>

Esse é um código exemplo do que se pode fazer, manipulando os atributos dos elementos HTML.
Não sei dizer se é uma “gambi” utilizar um padrão no ID das divs, de modo que eu possa inclui-las em um loop via PHP, por exemplo. Mas espero que sirva de inspiração para códigos melhores 😉

10 comentários

1 menção

Pular para o formulário de comentário

    • fabio oliveira em 6 de julho de 2012 às 13:31
    • Responder

    Oi Querida, belo post.

    Seguinte, tem como colocar uma página dentro ao invés de uma div???

    Valeu

      • Rhafaew em 22 de fevereiro de 2013 às 20:15
      • Responder

      Olá, adorei o post! porém eu já tenho um pequeno conhecimento sobre ‘Ui Dialog’. rerer
      Fabio, Assim como o Luiz Fernando disse esta corretismo, sei porque já fiz utilizando include ( cod: ), comigo funcionou direitinho, espero que vc consiga fazer no seu projeto! Boa sorte!

    • Luis Fernando em 4 de agosto de 2012 às 19:21
    • Responder

    Fala Fabio, Acredito que pra adicionar uma página você tenha que puxar uma página usando Include do PHP, ou colocar o código dessa página aí em HTML mesmo, pois tudo que vai alí dentro é um HTML mesmo, lembrando apenas de não colocar Doctype..Head…Body e nem HTML =) pois senão num vai ser validado.
    abraços

    (não testei)

    • daniel em 13 de setembro de 2012 às 8:58
    • Responder

    Olá muito bom o post, abriu um bomo leque de possibilidades, mas estou com problemas de funcionalidade para o IE8… infelizmente preciso fazer a página rodar em IE8, teria alguma opção?

  1. Muito bom. Preciso fazer algumas coisas, ao clicar no X para sair. Como faço ? Você pode me ajudar ?Obrigado. Ricardo

    • sidney em 25 de outubro de 2012 às 20:38
    • Responder

    Gostei muito, muito bom mesmo…..
    Só gostaria de saber como aplicar opacidade para este dialog modal, ao mover o dialog!!!

    • sidney em 25 de outubro de 2012 às 20:39
    • Responder

    gostei, mas falta uma coisa nesse widget, como aplicar opacidade? queria que esse comportamento acontecesse ao mover o Dialog

  2. Oi Elaine,
    Você sabe se tem como posicionar a janela modal no topo/esquerda ?
    Valeu!

    • Jaime em 1 de agosto de 2013 às 13:35
    • Responder

    Muitíssimo obrigado, vc acabou de poupar algumas boas horas minhas lendo e entendendo código. Simples, bem escrito e objetivo!!! Parabéns e continue assim pois o mercado precisa de bons profissionais!!!

  3. Extramamente util seu post, parabens, comecei a utilizar esta técnica a pouco tempo e estou tentando adaptar aos sites que ja fiz anteriormente. http://www.namorarcomigo.com.br

Deixe uma dúvida, resposta ou sugestão

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.