Uma breve discussão sobre como experimentar o elemento dialog em HTML5

As caixas de diálogo (também conhecidas como caixas modais e camadas flutuantes) são uma parte importante da interação do usuário em projetos web. As mais comuns que usamos são alert() e confirm() em js. ser customizado, portanto, durante o processo de desenvolvimento, geralmente construímos rodas de acordo com nossas próprias necessidades ou usamos rodas de terceiros.

Formas comuns de caixas pop-up:

Posição: canto superior esquerdo da tela, canto superior direito, canto inferior esquerdo, canto inferior direito, centro vertical, etc.

Tamanho: largura fixa e altura fixa, largura fixa e altura fixa, largura variável e altura fixa, etc.

A forma de diálogo em desenvolvimento é um caso de combinação aleatória de posição e tamanho.

No entanto, há uma situação (centralização vertical com largura e altura variáveis) que não é fácil de implementar (você pode usar display:table ou tradutor ou flex do CSS3 para obter detalhes, consulte o layout de centralização horizontal e vertical). .

A caixa de diálogo acima contém um contêiner para conteúdo e também há uma camada de máscara (máscara) abaixo da caixa de diálogo. A camada de máscara é uma camada de separação entre a caixa de diálogo e o corpo da página formada após o usuário acionar a caixa pop-up. Sua existência pode dar aos usuários um efeito de diferença visual mais óbvio e, ao mesmo tempo, evitar outras operações desnecessárias da página principal após os usuários acionarem a caixa de diálogo, produzindo assim uma melhor experiência do usuário.

Embora existam muitas rodas de diálogo para escolhermos, enfrentamos vários problemas.

• Qual caixa de diálogo escolher (uma dor de cabeça para pessoas com síndrome de escolha)
• Usabilidade (se a API é simples ou não, se depende de outras bibliotecas de terceiros)
• Escalabilidade
• Suporte de compatibilidade de navegador

Então, existe uma maneira simples de criar uma caixa de diálogo? Claro, podemos usar o elemento de diálogo HTML5.

HTML5 (caixa de diálogo)

 <dialog aberto> <h2>Olá, mundo.</h2></dialog>

É muito simples. Podemos usar o código acima para criar uma caixa de diálogo que aparece com o conteúdo 'Olá mundo'.

Também é fácil controlar a exibição/ocultação da caixa de diálogo. Adicione o atributo open para exibi-la e remova-o para ocultá-la. Claro, também podemos controlar a exibição e ocultação do diálogo através da interface DOM (show(), close())

Para a camada de máscara abaixo da caixa de diálogo, podemos usar o pseudoelemento ::backgrop, e para ativá-lo, precisamos usar a API DOM showModal(). A característica de ::backgrop é que sua posição está abaixo da caixa de diálogo. , em qualquer índice z acima.

Usar showModal() pode não apenas exibir a camada de máscara, mas também o contêiner de diálogo, portanto, ao usar ::backdrop, você pode usar showModal() em vez da API show() se você pressionar a tecla ESC no teclado, a API show(); A camada pop-up será fechada. Claro, você pode usar a API DOM close().

Podemos definir a camada ::backdrop como uma camada semitransparente, o código é o seguinte:

 dialog::pano de fundo { cor de fundo: rgba(0, 0, 0, 0,75);}

Além de nossas camadas pop-up comuns com informações imediatas, há também uma camada pop-up com um formulário que é mais comumente usado.

Podemos usar o elemento de diálogo HTML5 combinado com o elemento de formulário para criar essas camadas pop-up?

Resposta:Sim

Como podemos combinar estreitamente o elemento de formulário e o elemento de diálogo?

Resposta: Precisamos apenas adicionar o atributo method=dialog ao elemento dialog, para que o valor do valor do atributo do elemento button possa ser passado para o elemento dialog.

 <dialog> <form method=dialog> <p>Confirmar ou Cancelar</p> <button type=submit value=yes>Confirmar</button> <button type=submit value=no>Cancelar</button> </form </dialog><script> var dialog = document.querySelector('dialog') dialog.showModal() dialog.addEventListener('close', function(event) { console.log(dialog.returnValue) })</script>

demonstração

Embora este seja um HTML5 relativamente fácil de usar, ainda existem problemas de compatibilidade. O Chrome e o Opera o suportam melhor. É um recurso experimental no Firefox, mas não é compatível com IE, Edge e Safari. por iOS e também é compatível com Android não é bom o suficiente e é compatível apenas com Android 6 e posterior. Para obter detalhes, consulte caniuse

Então, as versões mais antigas dos navegadores podem suportar caixas de diálogo HTML5? Em primeiro lugar, o que pensamos é se existe um polyfill que suporte diálogo, assim como babel-polyfill que suporta os novos recursos do es6. Existe de fato um projeto de código aberto a11y-dialog, que fornece diferentes versões de vue e. reagir respectivamente.

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.