Uma caixa de diálogo modal é um tipo especial de caixa pop-up em uma página da Web: um pop-up que interrompe o usuário para que ele se concentre em si mesmo. Existem alguns casos de uso para abrir uma caixa de diálogo válidos, mas grande consideração deve ser feita antes. As caixas de diálogo modais forçam os usuários a se concentrar em conteúdos específicos e, pelo menos temporariamente, ignorar o restante da página.
As caixas de diálogo podem ser modal (só é possível interagir com o conteúdo) ou não (ainda é possível interagir). com conteúdo fora da caixa de diálogo). As caixas de diálogo modais são exibidas sobre o restante do conteúdo da página. O restante da página fica inerte e, por padrão, oculta por um pano de fundo semitransparente.
O elemento HTML semântico <dialog>
para criar uma caixa de diálogo
vem com semântica, interações de teclado e todas as propriedades e métodos da interface HTMLDialogElement
.
Caixas de diálogo modais
Confira um exemplo de <dialog>
modal. Abra a caixa de diálogo com a opção "Abrir caixa de diálogo modal". . Depois de aberta, há três maneiras de fechar a caixa de diálogo: a tecla Esc, enviando um formulário com
um botão com o formmethod="dialog"
;
(ou se o próprio formulário tiver method="dialog"
definido) e o método HTMLDialogElement.close()
.
O HTMLDialogElement
tem três métodos principais, além de todos os métodos herdados de HTMLElement
.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Porque este <dialog>
foi aberto pelo HTMLDialogElement.showModal()
é uma caixa de diálogo modal. Abrir uma caixa de diálogo modal desativa e oculta tudo, exceto a própria caixa. Se você
Passe o cursor sobre a interface fora da caixa de diálogo. Todos os elementos vão se comportar como se fossem pointer-events: none;
.
estava definido, nem mesmo o botão que abre a caixa de diálogo reage às interações.
Quando a caixa de diálogo é aberta, o foco se move para ela. O foco é definido no primeiro elemento na ordem sequencial de navegação pelo teclado nessa caixa de diálogo.
Se você pressionar a tecla tab
repetidamente, apenas o conteúdo da caixa de diálogo poderá ser destacado enquanto ela estiver
aberta. Tudo o que estiver fora da caixa de diálogo modal vai ficar inerte enquanto ela estiver aberta.
Quando uma caixa de diálogo é fechada, modal ou não, o foco retorna ao elemento que a abriu. Se, de forma programática, abra uma caixa de diálogo que não seja baseada na ação do usuário e reconsidere. Se precisar, coloque o foco de volta onde estava antes da abertura do diálogo. especialmente se o usuário dispensar a caixa de diálogo sem interagir com ela.
Há um atributo global inert
que pode ser usado para desativar um elemento e todos os descendentes dele, exceto os ativos
caixa de diálogo. Quando uma caixa de diálogo modal é aberta usando showModal()
, a inércia ou a desativação não tem custo financeiro. o atributo
não está definido de maneira explícita.
O pano de fundo que oculta tudo, exceto a caixa de diálogo, pode ser estilizado usando ::backdrop
.
pseudoelemento. O pano de fundo só aparece quando um <dialog>
é mostrado com o método .showModal()
. Esse pseudoelemento
corresponde a todos os panos de fundo, incluindo o exibido quando a API FullScreen é usada;
como ao visualizar um vídeo em modo de tela cheia, que não tem a mesma proporção que a tela ou o monitor.
Caixas de diálogo não modais
A HTMLDialogElement.show()
abre uma caixa de diálogo de forma semelhante, mas sem adicionar um pano de fundo nem fazer com que qualquer coisa fique inerte.
A tecla Esc não fecha caixas de diálogo não modais. Por isso, é ainda mais importante incluir um método
de fechar a caixa de diálogo não modal. Ao fazer isso, se você estiver mais perto do diálogo, perceba que o foco irá para o elemento
que abriu a caixa de diálogo, o que pode não ser a melhor experiência do usuário.
Embora um botão para fechar a caixa de diálogo não seja oficialmente exigido pela especificação, considere-o como necessário. A tecla Esc fechará uma caixa de diálogo modal, mas não uma não modal. Um botão visível que é capaz de receber foco melhora a acessibilidade e experiência do usuário.
Como fechar uma caixa de diálogo
O método HTMLDialogElement.close()
não é necessário para fechar uma caixa de diálogo. Você não precisa de JavaScript. Para fechar o <dialog>
Sem JavaScript, inclua um formulário com um método de caixa de diálogo definindo method="dialog"
no <form>
ou formmethod="dialog"
no botão.
Quando um usuário faz envios pelo método dialog
, o estado dos dados inseridos pelo usuário é mantido. Enquanto há um evento de envio,
o formulário passa por uma validação de restrição (a menos que novalidate
esteja definido). Os dados do usuário não são apagados nem enviados.
Um botão "Fechar" sem JavaScript pode ser escrito da seguinte maneira:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Talvez você tenha notado o atributo autofocus
definido no fechamento <button>
neste exemplo. Os elementos com o atributo autofocus
definido em um <dialog>
não receberão
focar no carregamento da página (a menos que a página seja carregada com a caixa de diálogo visível). No entanto, o foco vai aparecer quando a caixa de diálogo for aberta.
Por padrão, quando uma caixa de diálogo é aberta, o primeiro elemento focalizável dela recebe foco, a menos que outro elemento
na caixa de diálogo tem o atributo autofocus
definido. Definir o atributo autofocus
no botão "Fechar" garante que
ele recebe foco quando a caixa de diálogo é aberta. Mas incluir autofocus
em uma <dialog>
deve ser feito com muita consideração. Todos os elementos na sequência anteriores ao elemento com foco automático são ignorados.
Discutiremos esse atributo mais detalhadamente na lição principal.
A interface HTMLDialogElement
inclui um returnValue
.
. O envio de um formulário com um method="dialog"
define o returnValue
como o name
, se houver, do botão de envio usado para
envie o formulário. Se tivéssemos escrito <button type="submit" name="toasty">close</button>
, o returnValue
seria toasty
.
Quando uma caixa de diálogo é aberta, o atributo booleano open
está presente, o que significa que a caixa de diálogo está ativa e pode ser acessada. Quando uma caixa de diálogo for aberta adicionando o atributo open
em vez
do que usando .show()
ou .showModal()
, a caixa de diálogo não terá modal. O HTMLDialogElement.open
retorna true
ou false
, dependendo se a caixa de diálogo está disponível para interação, e não se é modal ou não.
O JavaScript é o método preferido para abrir uma caixa de diálogo, incluindo o atributo open
no carregamento da página e depois removendo
com .close()
, pode ajudar a garantir que a caixa de diálogo esteja disponível mesmo quando o JavaScript não estiver.
Mais detalhes
Não usar tabindex
O elemento ativado para abrir a caixa de diálogo e o botão "Fechar" contido nela (e possivelmente outro conteúdo) podem receber
foco e são interativos. O elemento <dialog>
não é interativo e não recebe foco. Não adicione a propriedade tabindex
.
à caixa de diálogo.
Papéis ARIA
O papel implícito é dialog
. Se a caixa de diálogo
é uma janela de confirmação que comunica uma mensagem importante que requer uma confirmação ou outra resposta do usuário, defina role="alertdialog"
.
A caixa de diálogo também precisa ter um nome acessível. Se o nome acessível puder ser fornecido com um texto visível, adicione aria-labelledby="idOfLabelingText"
.
Padrões de CSS
Os navegadores oferecem o estilo padrão para dialog
. O Firefox, o Chrome e o Edge definem color: CanvasText;
como background-color: Canvas;
e o Safari define color: black; background-color: white;
nas folhas de estilo do user agent. O color
foi herdado
de dialog
, e não de body
ou :root
, o que pode ser inesperado. A propriedade background-color
não é herdada.
Teste seu conhecimento
Teste seus conhecimentos sobre o elemento da caixa de diálogo.
Como você estiliza a área atrás da caixa de diálogo?
::background
.::backdrop
.background
.