Attributo Popover HTML

I modali sono stati una parte importante dei siti Internet per due decenni. Impilamento di contenuti e usando fetch Per svolgere le attività sono un ottimo modo per migliorare la UX sia su desktop che su dispositivi mobili. Sfortunatamente la maggior parte degli sviluppatori non sa che le specifiche HTML e JavaScript hanno implementato un sistema modale nativo tramite il popover Attributo – Dai un’occhiata!

L’HTML

La creazione di un modale HTML nativo consiste nell’uso del popovertarget attributo come set off e popover attributo, abbinato a un idper identificare l’elemento del contenuto:

Open popover
That is the contents of the popover

Dopo aver fatto clic sul buttonil popover si aprirà. Il popover, tuttavia, non avrà un colore tradizionale di strato di sfondo, quindi dovremo implementarlo da soli con un po ‘di magia CSS.

Il CSS

Lo styling Il contenuto del contenuto di popover è piuttosto normal, ma possiamo usare lo pseudo-selettore del selettore Types Selector per modellare lo “sfondo” del modale:

/* contents of the popover */
(popover) {
  background: lightblue;
  padding: 20px;
}

/* the dialog's "modal" background */
(popover):-internal-popover-in-top-layer::backdrop {
  background: rgba(0, 0, 0, .5);  
}

:-internal-popover-in-top-layer::backdrop rappresenta lo “sfondo” del modale. Tradizionalmente quell’interfaccia utente è stata un elemento con opacità story per mostrare la relazione di impilamento.