Ambos HTML5 e javascript tornam possível exibir caixas de diálogo no CSS3. Por exemplo, você pode ver uma combinação de uma caixa de diálogo HTML5 / CSS3 que não requer o uso de javascript em Projeto de código.

Adicionando javascript significa que você tem acesso imediato ao alerta (), confirmar () e funções rápidas () para exibir caixa de diálogo directo limitado. Você também tem todas as funcionalidades que o javascript pode fornecer para criar caixas de diálogo personalizadas verdadeiramente surpreendentes.

O problema com todas estas abordagens é que você pode precisar escrever uma quantidade considerável de código para obter o resultado desejado. Por outro lado, usando jQuery UI torna possível criar esses tipos caixa de diálogo sem muito codificação em tudo:

• básico

• Animado

  Video: Curso de HTML5 e CSS3 - Aula 6 - Div e Class

• Modal

• Modal com confirmação

• formulário modal

  Video: CSS POSITIONING (PART1)

• mensagem modal

Além disso, até mesmo uma caixa de diálogo básica jQuery UI proporciona uma melhor funcionalidade do que a função de alerta javascript (). Você pode mover a caixa de diálogo ao redor, redimensioná-la, e fechá-lo usando o X no canto superior direito. O texto também pode ser decorado de diversas maneiras, porque ele usa de entrada HTML padrão.

O exemplo a seguir começa criando um estilo interno para usar para decorar o texto. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 06Widgets do código para download como DialogBox.HTML.)

Este código fornece algumas mudanças simples para o texto - apenas o suficiente para que você pode ver o CSS personalizado no trabalho. O código a seguir cria a caixa de diálogo na tela automaticamente quando você carregar a página.

Video: 04 Modal Dialog CSS

Criando uma caixa de diálogo simples

A caixa de diálogo requer dois elementos - um recipiente, tal como um

, para segurar o conteúdo. Observe que o texto do parágrafo inclui uma neste caso para fornecer ênfase à palavra interessante. Você pode formatar o conteúdo de qualquer forma desejada sem modificar a chamada para jQuery UI em tudo.

O script usa um seletor de ID para acessar o