Como trabalhar com diálogo no CSS3

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 no 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 de 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 de caixa de diálogo sem muito codificação em tudo:

  • básico

  • Animado

  • Modal

  • Modal com a confirmação

  • formulário modal

  • mensagem modal

Além disso, 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 várias maneiras porque ele usa de entrada HTML padrão.

O exemplo que se segue começa com a criação de um estilo interno para usar para decorar o texto. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 Widgets 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.

Criando uma caixa de diálogo simples

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

, para manter o subtítulo no atributo título e um elemento de texto, tal como um

, para segurar o conteúdo. Observe que o texto inclui um parágrafo 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 selector de ID para acessar o

. Em seguida, ele faz uma chamada simples de diálogo () para exibir a caixa de diálogo na tela. Observe que ele fornece uma aparência agradável e contém conteúdo formatado, ao contrário da função de alerta (), que fornece uma caixa de diálogo austera, quadrada que carece de qualquer formatação.

image0.jpg

Semelhante

menu