Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
Autres astuces en CSS - Une fenêtre modale (popup)
→ Une fenêtre modale (popup), uniquement en CSS, et responsive.
La proposition ci-dessous est issue de ce site : (auteur : Django Blais)
Elle vous permet de générer une fenêtre modale (un popup), uniquement en CSS, qui s'ouvrira au clic et dans laquelle vous pouvez placer des contenus variés... y compris qui pourrait servir à "agrandir" une image vignette comme ci-dessous. Un ascenseur vertical se met automatiquement en place dès que le contenu déborde de la hauteur prévue.
Le titre de la fenêtre « modale »
Exemples de contenu : vidéo, image, texte...
Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri. Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente defensione carnifex rapinarum sequester et obductio capitum et bonorum ubique multatio versabatur per orientales provincias, quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.
Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent. Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.
Cliquer sur l'image ci-dessous pour "l'agrandir"
Le code ci-dessous est détaillé et commenté le plus possible, il a une première partie [style type="text/css"]...[/style] à mettre au début du code source de la page ou de la boîte encadrée de ces balises, ou bien tel quel, dans un fichier spécifique comme c'est le cas ici (nommé CSS_fenetre_modale.css) dont l'appel au début du code source est le suivant :
<link charset="utf-8" href="skin/css/CSS_fenetre_modale.css" rel="stylesheet" />
.cf:before, .cf:after { /*pseudo-éléments !!IMPORTANT NE PAS MODIFIER!!*/
content:"";
display:table;
}
.cf:after { /*pseudo-élément !!IMPORTANT NE PAS MODIFIER!!*/
clear:both;
}
.droite {
float:right;
}
.oModal {
position: fixed; /*fixed pour fixer la fenêtre ou éventuellement absolute pour lui permettre de défiler à la souris*/
z-index: 99999; /*index de surperposition élevé: important*/
top: 0; /*positions*/
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0, .85); /*fond écran lors du popup*/
opacity:0; /*opacité = 0 donc invisible*/
-webkit-transition: opacity 0s ease-in;
-moz-transition: opacity 0s ease-in;
transition: opacity 0s ease-in; /*transition opacité temps nature*/
pointer-events: none;
}
.oModal:target {
opacity:1; /*opacité = 1 donc visible*/
pointer-events: auto;
}
.oModal:target > div {
margin: 2% auto; /*marges extérieures*/
transition: all 0.4s ease-in-out; /*transition tout temps nature*/
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
.oModal > div {
width: 80%; /*largeur fenêtre modale*/
height:80%; /*hauteur fenêtre modale*/
overflow:auto; /*mise en place ascenseur vertical si débordement*/
position: relative;
padding: 8px; /*marges intérieures*/
border: 2px solid #c0c0c0; /*bordure : épaisseur nature couleur*/
border-radius: 8px; /*arrondis*/
background: linear-gradient(rgba( 75, 75, 75, .9), rgba( 0, 0, 0, .9)); /*fond fenêtre modale*/
}
.oModal > div header { /*fenêtre modale partie haute*/
border-bottom: 1px dotted #c0c0c0; /*bordure basse : épaisseur nature couleur*/
color: #e7e7e7; /*couleur texte*/
}
.oModal > div header a:after, .oModal > div footer a:after { /*fenêtre modale liens haut et bas*/
font-family: 'FontAwesome';
font-size:24px;
content: '\f00d';
}
.oModal > div footer { /*fenêtre modale partie basse*/
border-top: 1px dotted #c0c0c0; /*bordure haute : épaisseur nature couleur*/
color: #d6af84; /*couleur texte*/
}
.oModal > div section { /*fenêtre modale contenu*/
color: #e7e7e7; /*couleur texte*/
}
.oModal a { /*fenêtre modale lien*/
color: #FF9900; /*couleur texte*/
}
.oModal a:hover { /*fenêtre modale lien survolé*/
color: #FFFF00; /*couleur texte*/
}
.oModal > div h2 { /*fenêtre modale titre*/
margin:0; /*marges extérieures*/
color: #d6af84; /*couleur texte*/
}
.oModal > div section, .oModal > div header, .oModal > div footer { /*fenêtre modale différentes parties*/
padding:5px 15px; /*marges intérieures*/
}
Pour les deux exemples ci-dessus, il y a deux séries de règles .oModal et .oModal2 mais les seules différences se situent dans les dimensions de la fenêtre et dans le caractère qui sert pour la fermeture de la fenêtre : dans le premier cas un caractère de la police Font Awesome ( https://fontawesome.com/ ) et dans le second un caractère plus classique et standard de la police Times New Roman. Voir ci-dessous les deux différences.
.oModal > div { width: 95%; /*largeur fenêtre modale*/ height:90%; /*hauteur fenêtre modale*/ ... } .oModal > div header a:after, .oModal > div footer a:after { /*fenêtre modale liens haut et bas*/ font-family: 'Times New Roman'; font-size:24px; content: '\04fe'; }
Ensuite, il y a deux codes distincts en entrer pour chaque exemple : le code de la fenêtre en elle même, non visible à placer où vous voulez dans la page ou la boîte et le code du lien qui permettra d'ouvrir cette fenêtre à placer où vous souhaitez avoir le lien.
→ Premier exemple
<div class="oModal" id="oModal">
<div>
<header>
<a class="droite" href="#fermer" title="Fermer la fenêtre"></a>
<h2>Le titre de la fenêtre « modale »</h2>
</header>
<section>
<p>Exemples de contenu : vidéo, image, texte...</p>
<p>Du texte...</p>
<p>Du texte...</p>
<p>Du texte...</p>
</section>
<footer class="cf">
<p>Un texte en bas de page...<a class="droite" href="#fermer" title="Fermer la fenêtre"></a></p>
</footer>
</div>
</div><!--fin oModal-->
<p style="text-align: center;"><a href="#oModal">Cliquer pour ouvrir le popup</a></p><!--lien vers oModal-->
→ Second exemple
<div class="oModal" id="oModal">
<div>
<header>
<a class="droite" href="#fermer" title="Fermer la fenêtre"></a>
<h2>Une possibilité pour agrandir une petite image...</h2>
</header>
<section>
<img alt="MonImage" src="images/MonImage-Grande.jpg" style="border:0px solid;margin:0px;width:100%;" />
</section>
<footer class="cf">
<p>Un archer<a class="droite" href="#fermer" title="Fermer la fenêtre"></a></p>
</footer>
</div>
</div><!--fin oModal-->
<p style="text-align: center;">Cliquer sur l'image ci-dessous pour "l'agrandir"</p>
<div style="text-align: center;"><a href="#oModal"><img alt="MonImage" src="images/MonImage-Petite.jpg" style="border:0px solid;margin:0px;" /></a>
</div><!--lien vers oModal-->
→ Une petite suggestion pour travailler votre contenu de la fenêtre modale : Dans l'éditeur de adHoc, on ne le voit pas, bien sûr. Créez-le à l'extérieur du procédé, et quand il est prêt, copiez-coller le code source de ce contenu entre les balises [section]...[/section ].
Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.