Utilização de Dialogs
De DTI Wiki
Para que você possa trabalhar com Dialogs é necessário primeiro verificar se a biblioteca jQuery UI está incluída. Se você precisa incluir a biblioteca em seu projeto acesse Adicionando jQuery UI.
Após adicionar a biblioteca veja o padrão que definimos para a utilização de Dialogs nos projetos da DTI:
O jQuery UI permite que o código dos modais esteja presente no arquivo pai (arquivo que irá fazer a chamada do dialog), mas também permite que o modal seja aberto através do carregamento de outro arquivo. O padrão que adotaremos é o de sempre que possível utilizar o carregamento de um arquivo externo para abertura do modal. Isso considerando o fato de que tornará os arquivos html mais limpos e organizados.
A seguir veja um exemplo de como fazer:
COMO FAZER
<script type="text/javascript" src="/html/scripts/jquery/js/jquery-ui-vesao-atual.custom.min.js"></script> $('#dialog').dialog({ title:"Titulo", height: 237, // este tamanho é apenas para exemplificação width: 433, // este tamanho é apenas para exemplificação position: 'center', // esta posição é apenas para exemplificação open: function(){ //para utilizar a função load é necessário importar o jquery em seu arquivo html $(this).load("nome-do-arquivo.php", {"acao":"abrirModal", "codservico": codservico}); }, buttons:{ Fechar: function() { $(this).dialog("close"); // para fechar o dialog }, Confirmar: function() { //aqui a ação que você desejar } } });
Dentro do corpo html (arquivo pai) é importante que você adicione uma div como a seguir (orientamos você a adicionar está div dentro da tab <body> antes de terminar o arquivo):
<div id="dialog"></div>
Algumas considerações importantes:
- Não há motivos para referenciar um div por meio de classe (".dialog") ao invés de id ("#dialog") uma vez que só deve haver uma dessas divs por página. Se for referenciado por classe há o risco de o seletor encontrar mais de uma div com a classe e abrir o dialog repetido.
- Observe o código dentro da função "open", lá é possível observar que a função load (do jQuery) está fazendo uma requisição para o arquivo PHP do primeiro parâmetro da função. O segundo parâmetro da função contém variáveis que serão passadas para o arquivo através de $_POST. Se a sua necessidade é apenas chamar um outro arquivo não é necessário informar o segundo parâmetro. Você também fazer uso do load para chamar arquivos ".html"
- Se você precisar fazer uso de navegação no modal recomendamos a utilização de ajax visto que já estamos fazendo uso do mesmo;
- Você pode adicionar outros tratamentos ou configurações em seu dialog, por enquanto não padronizamos isso, mas tente ver em outras telas do sistema exemplos de uso, pode ser bem útil.
É possível encontrar maiores informações a cerca do uso de dialogs na através da documentação oficial: Dialogs do jQuery UI
