dialoogelement - modaliteiten gemakkelijk gemaakt

Eiji Kitamura

Chrome Canary heeft ondersteuning gekregen voor het dialoogelement achter een vlag. Het dialog kan worden gebruikt voor pop-ups op een webpagina.

• show() : Dialoogvenster openen.
• close() : Dialoogvenster sluiten. Neemt een optioneel argument waar, indien aanwezig, dialog.returnValue op is ingesteld.
• showModal() : Modaal dialoogvenster openen.
• ::backdrop : Pseudo-element om de achtergrond achter een modaal dialoogvenster te stylen.
• close gebeurtenis: wordt geactiveerd wanneer een dialoogvenster wordt gesloten.

Update op 16 december 2013

Het dialog ondersteunt nu:

• gebeurtenis cancel : wordt geactiveerd wanneer de Escape-toets wordt ingedrukt in een modaal dialoogvenster. Deze gebeurtenis kan worden geannuleerd met event.preventDefault() .
• autofocus attribuut: Het eerste formulierbesturingselement in een modaal dialoogvenster dat het autofocus attribuut heeft, indien aanwezig, zal de focus krijgen wanneer het dialoogvenster wordt weergegeven. Als een dergelijk element niet aanwezig is, wordt het eerste focusseerbare element gefocusseerd.
• form[method="dialog"] : Alleen geldig binnen een dialoogvenster. Bij het indienen van het formulier wordt het dialoogvenster gesloten en wordt dialog.returnValue ingesteld op de waarde van de verzendknop die is gebruikt.

Bekijk details met een live demo en polyfill .

Schakel het in door 'Experimentele webplatformfuncties inschakelen' in chrome://flags/ in te schakelen.