Dernière mise à jour : avril 2023
Le code :
<main>
<dialog id="fermer-modal" aria-modal="true" popover>
<h2>Lorem ipsum dolor sit</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit</p>
<div>
<button class="button" popovertarget="savoir" popovertargetaction="toggle">En savoir plusv/button>
<button class="button ferm" popovertarget="fermer-modal" popovertargetaction="hide" autofocus>Fermer</button>
</div>
</dialog>
<dialog id="savoir" aria-modal="true" popover>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi laborum obcaecati doloremque facilis ipsum tempora, necessitatibus maiores voluptates! Dolore sunt perferendis quod alias iusto aut eaque atque nisi pariatur cumque?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi laborum obcaecati doloremque facilis ipsum tempora, necessitatibus maiores voluptates! Dolore sunt perferendis quod alias iusto aut eaque atque nisi pariatur cumque?</p>
<button class="button ferm" popovertarget="savoir" popovertargetaction="hide" autofocus>Fermer</button>
</dialog>
<article>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi laborum obcaecati doloremque facilis ipsum tempora, necessitatibus maiores voluptates! Dolore sunt perferendis quod alias iusto aut eaque atque nisi pariatur cumque?</p>
...
...
...
</article>
</main>
<button tabindex="1" class="info" popovertarget="fermer-modal" popovertargetaction="toggle" aria-label="Ouvrir popup">
<svg viewBox="0 0 15 15" aria-hidden="true"><path d="M7.5 1C6.7 1 6 1.7 6 2.5S6.7 4 7.5 4 9 3.3 9 2.5 8.3 1 7.5 1zM4 5v1s2 0 2 2v2c0 2-2 2-2 2v1h7v-1s-2 0-2-2V6c0-.5-.5-1-1-1H4z"/></svg>
</button>
*,*::after,*::before{box-sizing:border-box}
[popover] {
--tr: .4s;
border-radius:.5rem;
border:4px solid hsl(248, 78%, 62%);
max-width: 75ch;
padding: 1rem;
transform: scale(calc(1 - var(--a)));
}
@initial {
[popover] {
--a: 1;
}
}
[popover]:popover-open {
}
[popover]::backdrop {
--a: 0;
opacity: calc(1 - var(--a, 1));
}
[popover]:popover-open::backdrop {
background: hsl(0 0% 10% / 0.5);
}
@media(prefers-reduced-motion: no-preference) {
[popover] { transition: var(--tr); }
[popover]::backdrop { transition: opacity var(--tr); }
}
main {
max-width: 75ch;
margin:auto;
}
p{font-size:1.115rem;}
article {
padding-bottom: 2rem;
}
article > p + p {
margin-top: 2rem;
}
[popover]>div{display: flex;justify-content: space-around}
button{border:none;cursor:pointer;background-color:hsl(248, 78%, 64%);font-family: inherit;display:inline-flex;align-items: center;justify-content: center}
.info{
position: fixed;
bottom:1.25rem;
right:1.25rem;
width:60px;
height:60px;/*aspect-ratio:1;*/
border-radius:50%;
}
.info svg {
fill: white;
height:2em;
width:2em;
}
.button{border:2px solid transparent;color:white;font-size:1.115rem;border-radius:.5rem;padding:0 1rem;height:48px;}
.ferm{background:unset;color:#555;border-color:hsl(248, 78%, 62%)}
button:not(:focus-visible):focus{box-shadow: 0 0 0 4px hsl(248, 78%, 58%)}
button:focus-visible{
outline: 2px solid #6753ea;
outline-offset: 4px;
}
button:not(:focus-visible){
outline: none
}