Introdução detalhada à caixa de diálogo HTML5.2

Em 24 de dezembro de 2017, o padrão HTML5.2 foi solidificado, o que também significou que o terminal móvel entrou na fase de planejamento do HTML5.3. Embora o HTML5.2 tenha sido solidificado, algumas novas especificações internas ainda não foram suportadas pelos navegadores móveis. melhorar, aqui damos uma olhada em uma tag comumente usada que foi recentemente incorporada ao padrão, é a tag dialog.

Falando em tag de diálogo, muitas pessoas podem não estar familiarizadas com ela. Afinal, essa tag só era suportada pelo navegador Chrome até que o padrão HTML5.2 fosse corrigido. Quanto ao uso desta tag, ela pode ser claramente entendida com base em. a semântica.

O que podemos pensar aqui é alerta, confirmação e outras janelas pop-up. Sim, são da mesma família, são todas caixas pop-up. A seguir, daremos uma olhada rápida em algumas propriedades e cenários de uso do. etiqueta de diálogo.

 <dialog open=> <h2>Título</h2> <p>Conteúdo</p></dialog>

Por ser uma tag, na verdade é igual às tags div, p e outras tags comumente usadas. Conforme mostrado no código de exemplo acima, ela suporta quaisquer outros elementos internamente.

Aqui, você pode notar que o atributo open no código de exemplo acima, sim, é usado para controlar a exibição e ocultação desta janela pop-up. Claro, você também pode usar css para controlá-la arbitrariamente, assim como essas anormalidades. pode ocorrer ao utilizar as funções auxiliares de alguns dispositivos (como acessibilidade, software de leitura de tela, etc.), por isso é recomendado utilizar as funções mostrar e ocultar no padrão.

Em primeiro lugar, a tag dialog é um exemplo de HTMLDialogElement e herda de HTMLElement. Portanto, é uma tag do mesmo nível da tag div. A única diferença é que ela possui mais funções padrão do que div. Vamos dar uma olhada nos métodos padrão que a caixa de diálogo tem para usarmos.

 var dialog = document.getElementById(dialog);// Suponha que haja uma tag de diálogo com id=dialog na página // Fecha dialogdialog.close(); / No modelo Display dialogdialog.showModal();// O valor do parâmetro passado quando dialog.close() é chamado dialog.returnVlaue;// O status de exibição do diálogo dialog.open;

Você pode ir primeiro ao exemplo, operá-lo e depois ver quais recursos ele possui e depois voltar para comparar o seguinte resumo:

1: O método close pode ser chamado várias vezes, mesmo no estado oculto, e pode ser chamado novamente.

2: close pode passar uma variável, que deve ser uma string e expressa em returnVlaue.

3: O método show também pode ser chamado várias vezes, mesmo no estado oculto, sem problemas.

4: O método show não alterará a posição do brinde. A caixa pop-up ainda estará na posição original após o método show ser chamado.

5: método show, a posição de exibição está imediatamente atrás do elemento anterior, centralizada, sem uma camada de máscara atrás dele. O modo de exibição do índice z é semelhante ao relativo sem definir o índice z (se showModal não tiver sido chamado antes). ) ).

6: Se showModal tiver sido chamado, após o método show, o elemento será exibido na posição exibida por showModal e não mudará (mesmo que a altura do conteúdo mude muito).

7: Se houver dois elementos de diálogo, ambos chamam o método show Na estrutura html, o último diálogo sempre cobrirá o anterior (independentemente de qual diálogo chama o método show primeiro).

8: Haverá uma camada de máscara atrás da exibição de showModal. O nível de exibição está no nível de visualização da web do navegador. Como entender, você pode definir um elemento com um nível muito alto. a caixa de diálogo estará no final. O ponto anterior é particularmente adequado para caixas modais. Definitivamente, não haverá confusão hierárquica depois que a caixa pop-up aparecer.

9: showModal só pode ser chamado uma vez aqui significa que se a caixa de diálogo estiver no estado de exibição, um erro será relatado quando showModal for chamado novamente e, em outras palavras, não poderá ser executado diretamente. o atributo open existe, chamá-lo novamente irá Um erro é relatado, então é melhor usar o atributo open padrão para mostrar e ocultar a caixa de diálogo.

10: Se houver dois elementos de diálogo na página e ambos estiverem chamando o método showModal, independente de sua estrutura em HTML, o nível do diálogo chamado posteriormente será maior que o nível do diálogo chamado anteriormente.

11: O valor de dialog.returnVlaue é o valor passado ao chamar dialog.close(string). Ele suporta apenas strings. O valor passado quando dialog.close é chamado só é válido quando o diálogo é exibido.

12: Se nenhum valor foi passado em close, o valor de returnVlaue ficará vazio. Se um valor for passado para dialog.close(1), após a próxima exibição, dialog.close() será fechado e returnVlaue ainda será igual. para 1.

13: O valor de retorno de open é: verdadeiro/falso.

Outra vantagem do diálogo é que além de eventos básicos como clique, ele suporta dois eventos especiais adicionais para diálogo:

 var dialog = document.getElementById(dialog); // Suponha que haja uma tag de diálogo com id=dialog na página // Quando o método close é chamado dialog.onclose = function(){}; no lado do pc Ao pressionar a tecla. Mas depois da versão Chrome, parece não funcionar mais. dialog.oncancel=função(){};

Agora vamos ver um exemplo: exibição de exemplo de evento de diálogo.

Existem também diversas dúvidas, vamos listá-las aqui:

1: Somente chamando dialog.close() para ocultar a caixa de diálogo o evento onclose pode ser acionado.

2: Após o evento de cancelamento ser acionado, o evento de fechamento definitivamente continuará a ser acionado. Após a versão chrome64, o cancelamento não é acionado pela tecla esc.

3: Se houver vários botões para fechar a caixa de diálogo, passe um valor diferente cada vez que close for chamado. No retorno de chamada do evento close, use o valor de returnVlaue para determinar qual botão é usado para acionar o evento close.

Algumas das performances do diálogo foram explicadas anteriormente. Elas podem estar incompletas ou imprecisas, ou recursos mais recentes podem aparecer com o tempo.

Ao observar os exemplos anteriores, também vimos algumas deficiências, como: o estilo é particularmente feio. Em relação a isso, podemos redefinir completamente o estilo usando CSS sem afetar a semântica ou qualquer outra coisa. . É isso.

Eu só quero falar aqui sobre o desempenho do diálogo, então não farei isso.

Afinal, a caixa de diálogo é um rótulo semântico para caixas de diálogo pop-up e tem algumas vantagens exclusivas (como a altura do nível de visualização da web, embora agora seja compatível apenas com o Chrome, ainda é muito promissor para uso futuro). agora é até compatível consigo mesmo. Agora, em outros navegadores, implemente você mesmo um conjunto de mecanismos de diálogo (talvez já exista um plano de implementação para isso, então não vou procurá-lo aqui).

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.