Como criar uma caixa de diálogo personalizada em AJAX para HTML5 e CSS3 Programming - dummies

Vídeo: Criando chat com jQuery e PHP 2024

AJAX permite que os programadores HTML5 e CSS3 criem caixas de diálogo personalizadas. O JavaScript fornece algumas caixas de diálogo (as caixas de diálogo alerta e prompt), mas são bastante feias e relativamente inflexíveis. O jQuery UI inclui uma técnica para transformar qualquer div na caixa de diálogo virtual. A caixa de diálogo segue o tema e é redimensionável e móvel.

Construir a caixa de diálogo não é difícil, mas você precisa ser ativado e desativado com o código, ou não funcionará como uma caixa de diálogo adequada (que imita uma janela na operação sistema):

Crie a div que pretende usar como caixa de diálogo.

Crie uma div e dê uma ID para que você possa transformá-la em um nó da caixa de diálogo. Adicione o atributo do título e o título aparece na barra de título da caixa de diálogo.
```
A classe de diálogo permite que você tenha uma caixa de diálogo customizada móvel, importante, consistente com o tema da página instalada.
```
Transforme o div em uma caixa de diálogo.

Use o método dialog () para transformar a div em um nó da caixa de diálogo jQuery na função init ():
```
$ ("# dialog"). diálogo();
```
Ocultar a caixa de diálogo por padrão.

Normalmente, você não deseja que a caixa de diálogo seja visível até que algum tipo de evento aconteça. Neste exemplo particular, você pode não querer que a caixa de diálogo apareça até o usuário clicar em um botão. Você pode colocar algum código para fechar a caixa de diálogo na função init () para que a caixa de diálogo não apareça até que seja convocada.
Feche a caixa de diálogo.

Para fechar uma caixa de diálogo, consulte o nó da caixa de diálogo e ligue para o método dialog () novamente. Desta vez, envie o valor único "fechar" como um parâmetro e a caixa de diálogo fechará imediatamente:
```
// inicialmente caixa de diálogo $ ("# diálogo"). diálogo ("fechar");
```
Ao clicar no X fecha-se automaticamente a caixa de diálogo.

A caixa de diálogo possui um X pequeno que se parece com o ícone Fechar janela na maioria dos sistemas de janelas. O usuário pode fechar a caixa de diálogo clicando neste ícone.
Você pode abrir e fechar a caixa de diálogo com o código.

Meus botões de diálogo Abrir e diálogo Fechar chamam funções que controlam o comportamento da caixa de diálogo. Por exemplo, aqui está a função anexada ao botão Open Dialog:
```
function openDialog () {$ ("# dialog"). diálogo ("abrir");} // fim abertoDialog
```