Over het attribuut "popover"
Met het attribuut popover kun je een soort pop-up maken, vergelijkbaar met een modal dialog.
popover maakt van een element een pop-up-element. Het is een globaal attribuut, dat je simpelweg in de tag zet. Die tag moet wel een id hebben om het element zichtbaar te kunnen maken. Bij het laden van de pagina is de pop-up nl. verborgen.
Om de pop-up zichtbaar te maken is een knop nodig. Dat is altijd een <button type="button">-tag of
een <input type="button">-tag.
Met JavaScript kan dat niet. Door deze aanpak kan een pop-up alleen worden geactiveerd door een actie van een gebruiker.
De referentie tussen de knop en het pop-up-element wordt gemaakt met het attribuut popovertarget="(id van het
popover-element)", dat alleen beschikbaar is voor de tags <button> en <input>.
Als er op de knop wordt geklikt/getikt, verschijnt de pop-up. Als er weer op de knop, of gewoon ergens in het document, wordt
geklikt, verdwijnt de pop-up weer.
Een knop met het attribuut popovertarget gedraagt zich feitelijk als een AAN/UIT-schakelaar.
Een zichtbare pop-up verdwijnt ook door op Esc te drukken.
Het AAN/UIT-gedrag van een knop kan worden veranderd door ook het attribuut popovertargetaction mee te geven. Dat
attribuut kan drie waarden krijgen:
• toggle Als de pop-up verborgen is, wordt die zichtbaar. Als de pop-up zichtbaar is, wordt die verborgen.
Dit is de defaultwaarde. Als popovertargetaction wordt weggelaten is dit het gedrag van de knop.
• show De verborgen pop-up kan zichtbaar worden gemaakt, maar niet meer worden verborgen.
• hide De zichtbare pop-up kan worden verborgen, maar niet meer zichtbaar worden gemaakt.
De standaard-opmaak van een met popover gemaakte pop-up is een witte achtergrond met zwarte letters en een zwarte
rand, horizontaal en verticaal gecentreerd in het window.
Als je plaats en opmaak van de pop-up zelf wilt instellen, kan dat met de pseudoklasse :popover-open, die je toevoegt
aan de id van de pop-up. Gebruik van :popover-open als pseudo-selector (dus voor het hele document) is ook mogelijk.
Als je een eenvoudige pop-up nodig hebt, kun je daar bijvoorbeeld <h1> voor gebruiken. Voor meer een complexe pop-up gebruik je bij voorkeur een <div>-tag. Daar kun je (bijna) alle HTML in kwijt.
Voorbeelden:
Voorbeeld 1: popover in de meest basale vorm.
Klik of tik op de knop.
Hallo Wereld 1!
De HTML-code van dit voorbeeld is:
<button type ="button" popovertarget="voorbeeld_1">Klik mij!</button>
<h1 popover id="voorbeeld_1">Hallo Wereld 1!</h1>
CSS is hier niet gebruikt.
Voorbeeld 2: popover opgemaakt met :popover-open.
Klik of tik op de knop.
Hallo Wereld 2!
De HTML-code van dit voorbeeld is:
<button type ="button" popovertarget="voorbeeld_2">Klik mij!</button>
<h1 popover id="voorbeeld_2">Hallo Wereld 2!</h1>
De CSS-code van dit voorbeeld is:
#voorbeeld_2:popover-open {
position:fixed;
width:300px; height:150px;
inset:unset;
bottom:25px; left:25px;
margin:0;
color:#dd0000;
background-color:#ddffdd;
font-size:25px;
text-align:center;
}
Voorbeeld 3: popover opgemaakt met :popover-open,
gedrag ingesteld met popovertargetaction.
Klik of tik op de knoppen.
Hallo Wereld 3!
De HTML-code van dit voorbeeld is:
<button type ="button" popovertarget="voorbeeld_3"
popovertargetaction="toggle">Toggle</button>
<button type ="button" popovertarget="voorbeeld_3"
popovertargetaction="show">Show</button>
<button type ="button" popovertarget="voorbeeld_3"
popovertargetaction="hide">Hide</button>
<h1 popover id="voorbeeld_3">Hallo Wereld 3!</h1>
De CSS-code van dit voorbeeld is:
#voorbeeld_3:popover-open {
position:fixed;
width:300px; height:150px;
inset:unset;
bottom:25px; right:25px;
margin:0;
color:navy;
background-color:#ffdddd;
font-size:25px;
text-align:right;
}
Opmerkingen:
- Als je :popover-open gebruikt, moet je inset:unset en position:fixed gebruiken, anders wordt de pop-up niet goed getoond.
- Er kan maar één pop-up tegelijkertijd zichtbaar zijn.
