L'objectif de cette démonstration est de vous présenter la balise HTML5 dialog avec le minimum de JavaScript (pour ouvrir la boîte de dialogue avec la méthode showModal()).
En ce qui concerne l'animation CSS, sur Chrome Canary uniquement pour l'instant (juin 2023). Tapez dans la barre d'adresse: chrome://flags, puis tapez : Experimental Web Platform features et passez la valeur à enabled.
<dialog>
<form method="dialog">
<h3>Vous avez un nouveau message</h3>
<button aria-label="Fermer">
<svg aria-hidden="false" role="img" width="32" height="32" viewBox="0 0 24 24">
<path d="M16 8L8 16M8.00001 8L16 16" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<p>...</p>
</form>
</dialog>
<button class=bouton-demo onclick="document.querySelector('dialog').showModal()">cliquez ici</button>
.bouton-demo{
border:none;
display:flex;
justify-content: center;
margin:2rem auto;
font-size:1.25rem;
padding:.5rem 1rem;
border-radius:9999px;
background:#6753ea;
color:white;
font-family:inherit;
}
dialog {
inset-block-start: 0;
inset-block-end: 0;
transition: scale 0.4s, overlay 0.4s linear, display 0.4s;
scale:0;
max-width:500px;
border-color:#6753ea;
background-color:white;
color:currentcolor
}
dialog[open] {
scale:1;
}
@starting-style {
dialog[open] {
scale:0
}
}
dialog form {
display:grid;
}
dialog form button{
border:none;
background:none;
grid-area: 1/1;
place-self:start end;
height:3rem;
aspect-ratio:1;
display:grid;
place-items:center;
box-shadow:0 0 0 4px #6753ea;
border-radius:9999px}