Eu estava lendo alguns blogs de notícias de tecnologia e me deparei com o título Popover API chega ao Baseline. Fiquei confuso, durante meu recente mergulho no desenvolvimento front-end, recentemente tive muita dificuldade em me acostumar a usar Elements em HTML. Ao ler o blog, fiquei constantemente confuso sobre como estava usando o elemento até agora.

DR

Escolha para:

• Pop-ups modais que exigem foco do usuário
• Acessibilidade e interação com o teclado

Escolha popover para:

• Pop-ups não modais com dispensa leve
• Implementação fácil com código mínimo

Elemento

De acordo com o MDN O elemento Dialog

O elemento HTML representa uma caixa de diálogo modal ou não modal ou outro componente interativo, como um alerta descartável, inspetor ou subjanela.

A geralmente é usado e exibido sobre o conteúdo quando o site precisa chamar a atenção do usuário para algo importante. ou seja, assinar um boletim informativo, solicitar (mais como forçar) a desativação do bloqueador de anúncios ou aceitar os termos e condições.

Elemento

como Modal

Como você já deve ter visto várias vezes em vários sites, alguns desses pop-ups serão desenhados em toda a tela enquanto desfocam o plano de fundo ou desativam o plano de fundo e focam o usuário apenas na tarefa em questão, o usuário deve dispensar (somente se permitido) o pop-up ou insira as informações necessárias para que ele desapareça. Esse comportamento é chamado de 'elemento como modal'. Esses elementos modais são mostrados na camada superior da página.

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

quando mostrado usando o método showModal() pode ser descartado usando a tecla esc. Os usuários de teclado esperam tal comportamento que precisa ser mantido e é fornecido pelo navegador. Se vários diálogos modais estiverem abertos, apenas o último diálogo será fechado usando a tecla esc.

elemento como não modal

Talvez você nem sempre queira interromper o fluxo natural do usuário ao usar sua página da web, parar de fazer todo o resto e se concentrar no que deseja mostrar, mas ainda assim no seu conteúdo, como uma notificação do sistema, um consentimento de cookie ou uma dica geral informações. deve aparecer na camada superior da página, acima de qualquer outro conteúdo que possa ou não ser interagido pelo usuário. Esses tipos de pop-ups são chamados de pop-ups não modais. Os usuários podem dispensá-los manualmente ou em geral e desaparecerão por conta própria. Essas caixas de diálogo não modais ainda são mostradas na camada superior da página, mas sua prioridade pode ser controlada usando o índice z e o elemento modal terá um índice z maior que este e o tornará inacessível.

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

Exemplo de código

Alguns problemas

Tive dificuldade em entender o funcionamento e o uso de elementos não modais. Na minha opinião, o elemento não modal se comportou de forma inconsistente e precisava de código Javascript para lidar com situações como:

• Não há funcionalidade de dispensa leve. Clicar fora do modelo não fechará o .
• A chave esc não descarta e precisa de Javascript para lidar com esse cenário.
• precisa gerenciar o índice z manualmente se quiser desenhar a camada superior.

Para minha surpresa, a API popover respondeu ou corrigiu esses problemas e muito mais....

API popover

popover são atributos que podem ser adicionados a qualquer atributo HTML. Aqui está um exemplo.

Toggle the popover
Popover content

Principal diferença entre popover e elemento

A principal diferença entre os elementos popover e