Très utilisée pour afficher des informations, pour avoir une aide, cette fenêtre surgit au premier plan.
Il est désormais possible de la réaliser sans utiliser le javascript : le CSS 3 suffira.

Exemple 

Cliquer sur Information pour ouvrir la fenêtre.

X

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus a sapien id blandit. Pellentesque in porta odio. Proin imperdiet venenatis ligula ut luctus. In ut mauris magna. Aliquam orci nibh, pellentesque eget metus a, auctor faucibus diam. Sed nibh purus, dapibus at massa ut, tincidunt interdum erat. Aliquam eget pharetra mauris. Ut hendrerit porttitor mauris id pulvinar. Nam tempus pulvinar commodo. Proin at elit pharetra, ultricies est in, sagittis dui. Nam ac nisl id augue interdum tincidunt ac at nisi. In ornare enim sit amet velit consectetur faucibus. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras euismod sagittis nibh, ac maximus quam sollicitudin at. Nam odio felis, finibus eu auctor sed, mattis eu ante.

Nulla pellentesque elementum efficitur. Maecenas feugiat ornare enim sit amet semper. Sed cursus sodales purus, iaculis lacinia mi vestibulum id. Aenean at neque eu diam convallis eleifend. Aliquam sollicitudin mattis justo eleifend ornare. Phasellus hendrerit justo at rutrum tempor. Praesent nec mattis sem, vel malesuada nulla. Nam ipsum ante, dapibus vel molestie eu, rhoncus varius arcu. Maecenas at ipsum id ligula placerat maximus nec vitae ligula. Ut consectetur faucibus magna, a consectetur leo gravida id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Integer consequat dui lectus, eu bibendum turpis dictum a. Proin quis nisi mauris.

Phasellus rutrum lectus lorem, ac laoreet metus vehicula sed. Nunc quis iaculis elit, in fringilla est. Donec sodales eu enim a mollis. Integer suscipit quam nec lectus sagittis tristique. Aliquam id felis vitae libero gravida viverra. Donec vel orci pharetra, interdum urna id, imperdiet urna. Praesent justo turpis, imperdiet et semper nec, dictum non orci. Donec quis condimentum quam.

Information

Comment faire ? 

le HTML 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div id="id" class="oModal">
<div>
<header>
<a href="#fermer" title="Fermer la fenêtre" class="droite">X</a>
<h2>Titre</h2>
</header>
<section>
  <p>
  le texte
  </p>
</section>
<footer class="cf">
  <a href="#fermer" class="btn droite" title="Fermer la fenêtre">Fermer</a>
</footer>
</div>
</div>
<a href="#id">Ouvrir la fenêtre</a>

le CSS 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.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;
}
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
.oModal:target > div {
  margin: 10% 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: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  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;
}

Améliorations 

Afin d’afficher un ascenceur vertical pour les texte longs, j’ajoute au CSS :

1
2
3
4
.oModal > div {
  overflow-y: auto;
  max-height: 75%;
}
J’ajoute également, pour avoir un texte justifié dans la fenêtre :
1
2
3
.oModal:target p{
  text-align: justify;
}