CSS Fenêtre modale

Une fenêtre modale uniquement en CSS

Cette proposition est issue de ce site : (auteur : Django Blais)

Cliquer sur le lien ci-dessous pour ouvrir cette fenêtre popup. [Les textes sont obtenus aléatoirement sur ce site.]

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.

Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur. Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.

Je me suis contenté de jouer avec et d'adapter cette proposition pour un article, une boite libre de GuppY ou un autre CMS, bien sûr. Elle est "responsive design". Suivant les réglages, ce popup peut défiler avec la souris et une solution simple permet de prévoir un ascenseur vertical pour les longs textes.

Bien sûr une solution existe dans GuppY, mais qui utilise JQuery. Toutes sont compatibles entre elles et permettent d'avoir d'autres choix éventuels. Cette présente solution est très simple à mettre en oeuvre, et il sera possible, en l'appliquant telle que décrite dans cet article, d'avoir des réglages de style différents dans des articles différents (ce qui n'est pas possible -simplement- avec la solution native de GuppY).

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style est obligatoire au début du code source de l'article ou de la boite libre, ou dans styleplus.css.
Adapter à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, insérez le code correspondant en adaptant les contenus, bien sûr. Les parties surlignées en blanc seront à adapter à vos souhaits et votre configuration. Et le code correspondant au lien de l'appel à cette fenêtre modale peut être placé où vous le souhaitez.

Trois icônes close0.png close1.png et close1hover.png (de 24px*24px, placées dans le dossier img à la racine de GuppY) servent à créer le bouton de fermeture en haut à droite. la première est complètement transparente, et voici les deux autres :

Notez également à l'intérieur de <section></section > dans : <div...>

la présence de : style="background-color: transparent; max-height: 200px; margin: 10px auto; padding: 10px; overflow: auto;" qui permet de placer un ascenseur vertical dès que la hauteur est supérieure à 200px (à adapter) et ainsi éviter d'avoir de trop longs textes affichés et éventuellement, pour les smartphones et les tablettes de pouvoir utiliser ce procédé.

<div class="oModal" id="oModal">...</div><!--fin oModal--> peut être placé aussitôt après le <style...>...</style> et placez le <!--lien vers oModal--> à l'endroit souhaité dans l'article, la boite libre.

Petite suggestion pour travailler votre contenu de la fenêtre modale : Dans l'éditeur de GuppY, 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 entre les balises <section></section >.

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.