Le plus simple exemple de la série « Pure CSS3 » avec le sélecteur :target
! Pourquoi s’en passer! Tellement simple qu’on aurait pensé le retrouver dans un Bootstrap, mais non. Voilà un exemple de notification fixe en haut de la page ouverte à l’aide du sélecteur :target
...avec les couleurs Bootstrap.
/* CSS */
.cNote {
...
opacity:0;
}
.cNote:target{
...
opacity:1;
}
Exemples
CSS
<style> body{-webkit-backface-visibility:hidden} .cNote{ position:fixed; top:0; left:0; min-height:60px; line-height:60px; width:100%; z-index:1000; text-align:center; font-size:18px;color:#fff; background: rgba(0, 0, 0, 0.8); opacity:0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; pointer-events: none; } .cNote:target{ opacity:1; pointer-events: auto; } .cNote .erreur{background-color: rgba(246, 71, 71, 0.7) } .cNote .succes{background-color:rgba(3, 201, 169, 0.7)} .cNote .attention{background-color: rgba(247, 202, 24, 0.7)} .cNote a.cFerme {color:#ffffff;margin:0 10px 0 10px;float:right;} </style>
HTML
<div class="cNote" id="oNote"> <div class="erreur"><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 1</div> </div> <div class="cNote" id="oNote2"> <div><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 2</div> </div> <div class="cNote" id="oNote3"> <div class="attention"><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 3</div> </div> <div class="cNote" id="oNote4"> <div class="succes"><a href="#fermer" title="Fermer la fenêtre" class="cFerme">X</a> Note 4</div> </div> <div class="container"> <a href="#oNote">Bouton erreur</a> - <a href="#oNote2">Bouton message</a> - <a href="#oNote3">Bouton attention</a> - <a href="#oNote4">Bouton succès</a> </div>
Manipulation JavaScript
Quel ironique d’utiliser le JavaScript dans une technique en pure CSS. Il s’agit seulement de changer l’opacité, que le JavaScript peut aussi faire. Mais si le besoin se fait sentir, c’est aussi simple que d’ouvrir le lien ou plutôt la cible #oNote
:
<script>
window.location = "#oNote";
</script>
À l’ouverture de la page
<script>
document.addEventListener('DOMContentLoaded', function () {
window.location = "#oNote";
});
</script>
Avec un délai de 5 secondes
<script> setTimeout(function() {window.location = "#oNote";}, 5000); </script>
Avec un délai de fermeture
C’est exactement la même chose, mais en ciblant#fermer
. Par exemple ici après un délai de 5 secondes :
<script>
setTimeout(function() {window.location = "#fermer";}, 5000);
</script>