Como criar uma caixa de diálogo personalizada em AJAX para HTML5 e CSS3 Programação
AJAX permite que programadores HTML5 e CSS3 fazer caixas de diálogo personalizadas. javascript fornece algumas caixas de diálogo (o alerta e caixas de diálogo de aviso), mas estes são bastante feio e relativamente inflexível. O jQuery UI inclui uma técnica para transformar qualquer div dentro de uma caixa de diálogo virtual. A caixa de diálogo segue o tema e é redimensionável e móvel.
Construção de caixa de diálogo não é difícil, mas você precisa ser capaz de transformá-lo ligado e desligado com um código, ou não vai agir como uma caixa de diálogo adequada (que imita uma janela no sistema operacional):
Criar o div que você pretende usar como uma caixa de diálogo.
Criar um div e dar-lhe um ID de modo que você pode transformá-lo em um nó caixa de diálogo. Adicione o título atributo, eo título aparece na barra de título da caixa de diálogo.
A classe de diálogo permite que você tenha uma caixa móvel, sizablecustomized diálogo consistente com o tema installedpage.
Vire o div em uma caixa de diálogo.
Use o diálogo() método para transformar o div em um nó caixa de diálogo jQuery na nisso() função:
$ ( "# De diálogo") de diálogo (). -
Ocultar a caixa de diálogo por padrão.
Normalmente você não quer que a caixa de diálogo visível até que algum tipo de evento acontece. Neste exemplo particular, você pode não querer a caixa de diálogo aparecer até que o usuário clica em um botão. Você pode colocar um pouco de código para fechar a caixa de diálogo no nisso() função para que a caixa de diálogo não aparece até que seja convocado.
Feche a caixa de diálogo.
Para fechar uma caixa de diálogo, consulte o nó caixa de diálogo e chamar a diálogo() método nele novamente. Desta vez, enviar o valor único # 147 de perto # 148- como um parâmetro, ea caixa de diálogo irá imediatamente perto:
// Inicialmente perto de diálogo $ ( "diálogo #") de diálogo ( "close"). -
Ao clicar no X fecha automaticamente a caixa de diálogo.
A caixa de diálogo tem um pequeno X 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.
Meu diálogo Abrir e fechar botões de diálogo chamar funções que controlam o comportamento da caixa de diálogo. Por exemplo, aqui é a função anexado ao botão Abrir diálogo:
função OpenDialog () {$ ( "# de diálogo") de diálogo ( "open") -.} // fim OpenDialog