Popover

Interaktive elementer i HTML

Slideshow afbrudt… for 15%

Ingen tilmelding krævet.

Klik for at afsløre koden.

Afslør kode

Kode: TEMA4

Popover

Interaktive elementer i HTML

Slideshow afbrudt… for 15%

Ingen tilmelding krævet.

Klik for at afsløre koden.

Afslør kode

Kode: TEMA4

⨉

Popover

Indhold ovenpå indhold

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using

overlay, popup, popover, dialog osv.

popover

backdrop (baggrundslag)

popover

non-modal

modal

vs.

Jeg kan interagere med resten af siden

non-modal

modal

vs.

popover

Jeg kan ikke interagere med resten af siden

Popover

I sin enkleste form laver du en popover ved at tilføje attributten popover til det element, som skal vise selve popover-indholdet.

Du skal også give elementet et id, så det kan kobles sammen med det element, der åbner popoveren.

Popover

<button popovertarget="popup">Open popup</button>

<div id="popup" popover>
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

popover

Popover

<button popovertarget="popup">Open popup</button>

<div id="popup" popover>
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

-attributter

popover

popovertarget

id

popovertarget

Popover

<button popovertarget="popup">Open popup</button>

<div id="popup" popover>
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

-attributter

popover

popovertarget

id

Åbn øvelse

Popover

popovertarget

peger på id’et af den popover, der skal styres

bruges til at identificere popoveren og forbinde den med en kontrol

popover

markerer elementet som en popover

-attributter

popover

popovertarget

id

øvelse 1

Lav popup

Giv nyheden popover-attributten, og lad knappen pege på den via popovertarget og nyhedens id.

popover

popovertarget

Lad den forblive åben

Åbn øvelse

Selectors

<button popovertarget="popup">Open popup</button>

<div id="popup" popover>
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

popover

Selectors

<button popovertarget="popup">Open popup</button>

<div id="popup" popover>
  <h2>I'm a popup</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>

popover

Selectors

::backdrop

pseudoelement, der repræsenterer det visuelle lag bag en popover

:popover-open

popover-elementet i åben tilstand

[popover]

popover-elementet

[       ]

:popover-open

::backdrop

popover

attribut-selector

display-egenskab

Ændr ikke display direkte — brug :popover-open til at style, når popover'en er synlig.

[popover] { /* eller #min-popover */
  display: grid;
}

[popover]:popover-open {
  display: grid;
}

🚫

✅

max-width/-height

Sørg for, at din popover passer til skærmen ved at begrænse bredde og højde.

[popover] {
  max-height: ; /* fx 90vh */
  max-width: ; /* fx 50ch */
  width: ; /* fx 90vw*/
}

øvelse 2

Tilpas popup'en

Sæt en passende bredde og højde på popoveren, så den ikke fylder hele viewporten.

max-height

max-width

evt. width

Lad den forblive åben

Åbn øvelse

CSS transitions

Glidende overgange

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using

CSS transitions

.circle {
  /*...*/
  transition: 300ms;
}

Se eksempel

CSS transitions

.circle {
  /*...*/
  transition: all 300ms ease;
}

CSS transitions

.circle {
  /*...*/
  transition-duration: 300ms;
  transition-behavior: normal;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: all;
}

CSS transitions

{
transition: 1s;
}

CSS transitions

{
transition: 1s;
}

display: none;

Transition-behavior

{
transition: 1s allow-discrete;
}

display: none;

venter 1 sekund

@starting-style

Når et element vises for første gang – eller går fra display: none; til synligt – starter CSS-transitions ikke automatisk.

Browseren har nemlig ingen tidligere stil at animere fra.

@starting-style

@starting-style løser det ved at give elementet nogle startværdier, som browseren kan animere fra, når det dukker op.

@starting-style

.wrapper:hover .circle {
  scale: 4;
  display: block;
}
@starting-style {
  .wrapper:hover .circle {
    scale: 1;
  }
}

display: block;

start her

Popover

Hvordan relaterer det sig til popover?

@starting-style {
  ...
}

transition-behavior: allow-discrete;

:popover-open {
  ...
}

Popover transition

@starting-style {
  ...
}

transition-behavior: allow-discrete;

[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Popover transition

@starting-style {
  ...
}

transition-behavior: allow-discrete;

[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;
}

Popover transition

@starting-style {
  opacity: 0;
  rotate: -360deg;
}

transition-behavior: allow-discrete;

[popover] {
  opacity: 0;
  rotate: 360deg;
  transition: .5s allow-discrete;
}

:popover-open {
  opacity: 1;
  rotate: none;

  
  
  
    
  
}

Lukket

Før åben

Åben

Popover transition

Lukket

Før åben

Åben

Popover transition

øvelse 3-4

Animer popup og backdrop

Tilføj transition og allow-discrete til popoveren, og lav en simpel åbneanimation ved hjælp af @starting-style.

transition

allow-discrete

@starting-style

Lad den forblive åben

Åbn øvelse

Eksempel

Integrer popovers i dit projekt

"Nyheds"-sektion

Opgaven