Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

CSS popup API

Le code :



<main>
<div id="fermer-modal" popup>
<h2>Lorem ipsum dolor sit</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit</p>
<div>
<button class="button" popupshowtarget="savoir">En savoir plus</button>
<button class="button ferm" popuphidetarget="fermer-modal">Fermer</button>
</div>
</div>

<div id="savoir" popup>
<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" popuphidetarget="savoir">Fermer</button>
</div>	
		
<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" popupshowtarget="fermer-modal" 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}	

[popup] {

border-radius:.5rem;
border: 4px solid hsl(248, 78%, 62%);
max-width: 75ch;	
padding: 1rem; 
--a: 1;
transform: scale(calc(1 - var(--a)));
	
  }
	
[popup]::backdrop {

opacity: calc(1 - var(--a, 1));
	
}

[popup]:open::backdrop {
 
background: hsl(0 0% 10% / 0.5);

 
	}	
		
[popup]:open,
[popup]:open::backdrop  {

  --a: 0;
}	

	
main {
	
max-width: 75ch;
margin: auto;
	
  }

p{

font-size: 1.115rem;

}

article {
	
padding-bottom: 2rem;
  
}

article > p + p {
	
margin-top: 2rem;
	
  }


[popup]>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-color: unset;
color: #555;
border-color:hsl(248, 78%, 62%)

}

	
button:focus{

box-shadow: 0 0 0 4px hsl(248, 78%, 58%)

}
		
	
button:focus-visible{	
	
outline: 2px solid #6753ea;
outline-offset: 4px;
box-shadow:unset
	
	}
		
@media(prefers-reduced-motion: no-preference) {

[popup] {
  
  transition: transform 0.2s;
  
  }
  
[popup]::backdrop { 

transition: opacity 0.2s; 

}
  
}	
	




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.