Table des matières

Voici une fenêtre surgissante qui s’affiche sans encombrer la page.

Utilité

Pour ne pas quitter la page en cours, on peut insérer un texte, une image, une vidéo dans une popup au premier plan.
Dans l’exemple, sera affiché un texte de Philox, un chanteur beauvaisien.

Explications

Un clic sur le lien fait apparaître cette fenêtre ; ici pas de javascript, uniquement du css3.

Un exemple simple

X

Popup

Une fenêtre modale simple.

Ouvrir le popup

Le Html

<div id="exemple1" class="simple">
<div>
<header>
<a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
<h2>Popup</h2>
</header>
<p>Une fenêtre modale simple.</p>
</div>
</div>

Le Css

simple {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  pointer-events: none;
  overflow: auto;
}
.simple:target {
  opacity:1;
  pointer-events: auto;
}
.simple > div {
  max-width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 1em;
  border-radius: 2px;
  background: #fff;
}
.droite {
  float:right;
}

Améliorations

Pour avoir un effet de transition et une largeur plus importante, il suffit de modifier le Css.

X

Pisser sur la plage

J’ai pissé sur la plage en regardant le sable, c’était des traces de pattes d’oiseaux et c’était beau…
Au bord des premières vagues, monceaux d’un seau de plage et des mouches et des os qui sèchent au bord des vagues …
Messieurs des capitales, les chaussures à talons, méfiez- vous, ça dérape au bord des goémons, les rochers sont glissants, abrupts les versants, c’est fou ce que peut faire le bas d’un pull-over qui dépasse du blouson…
J’ai pissé sur la plage enjambant les rochers, la mer s’y casse la gueule toute seule en beauté…
Ça fait des sanglots d’eau, des gerbes qui vont trop haut, quand on veut en sortir, elle est comme un vampire, en refermant ses bras, elle vous murmure tout bas…
Cigarette à mon bec, j’ai revu mes amours en comptant lentement le sable fin des jours…
Toucher la peau des gens qui vivent en contemplant la beauté du naufrage en pissant sur la plage…
J’ai déserté les bars ou l’on attend sans cesse la marée qui déborde, allume le feu aux fesses…
Les voilà les beaux bars rénovés pour qu’on merde à l’ennui d’une chope immobile et tranquille, verre à verre, clope à clope, et pisser sur la ville…

Pisser sur la plage un texte de Philox.

Le Html

<div id="oModal" class="oModal">
<div>
<header>
<a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
<h2>Pisser sur la plage</h2>
</header>
<section>
<p>
Texte de Philox
</p>
</section>
<footer class="cf">
<a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
</footer>
</div>
</div>

Le Css amélioré

.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
   background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none; 
  overflow: auto;
}
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
.oModal:target > div {
  margin: 5% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out; 
}
.oModal > div {
  max-width: 800px;
  position: relative;
  margin: 5% auto;
  padding: 1em;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
 }
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
.oModal > div h2 {
  margin:0;
}
.oModal > div .btn {
  float:right;
}
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
   max-height: 100%;
 }