En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
Vous êtes ici :   Accueil » CSS Fenêtre modale
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

CSS Fenêtre modale

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

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.]

close.png

Le titre de la fenêtre « modale »

Exemples de contenu : vidéo, image, texte...

the-impatient-granny.jpg

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.

  • Style fenêtre modale
  • Code simplifié du corps de l'article

Style fenêtre modale

<style type="text/css">
.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 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: linear-gradient(to bottom, rgba( 29, 41, 41, 0.9), rgba( 25, 119, 147, 0.9)); /*fond écran*/
  opacity:0; /*opacité = 0 donc invisible*/
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s 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*/
  position: relative;
  margin: 1% auto; /*marges extérieures*/
  padding: 8px; /*marges intérieures*/
  border: 4px solid #e7e7e7; /*bordure : épaisseur nature couleur*/
  border-radius: 8px; /*arrondis*/
  background: linear-gradient(to bottom, rgba( 177, 83, 22, 0.9), rgba( 139, 56, 16, 0.9)); /*fond fenêtre modale*/
  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 header { /*fenêtre modale partie haute*/
  border-bottom: 1px dotted #e7e7e7;  /*bordure basse : épaisseur nature couleur*/
  color: #e7e7e7; /*couleur texte*/
}
.oModal > div header a { /*fenêtre modale lien partie haute*/
  background: url("img/close1.png") no-repeat; /*chemin icône*/
  margin:-5px 0 0 0 ; /*marges extérieures*/
}
.oModal > div header a:hover { /*fenêtre modale lien survolé partie haute*/
  background: url("img/close1hover.png") no-repeat; /*chemin icône*/
  margin:-5px 0 0 0 ; /*marges extérieures*/
}
.oModal > div footer { 
/*fenêtre modale partie basse*/
  border-top: 1px dotted #e7e7e7; /*bordure haute : épaisseur nature couleur*/
  color: #e7e7e7; /*couleur texte*/
}
.oModal > div section { /*fenêtre modale contenu*/
  color: #e7e7e7; /*couleur texte*/
}
.oModal a {
/*fenêtre modale lien*/
  color: #30AFCF; /*couleur texte*/
}
.oModal a:hover {
/*fenêtre modale lien survolé*/
  color: #e7e7e7; /*couleur texte*/
}
.oModal > div h2 {
/*fenêtre modale titre*/
  margin:0;  /*marges extérieures*/
}
.oModal > div section, .oModal > div > header, .oModal > div > footer { /*fenêtre modale différentes parties*/
  padding:5px 15px; /*marges intérieures*/
}
</style>

Code simplifié du corps de l'article

<div class="oModal" id="oModal">
    <div>
        <header>
            <a class="droite" href="#fermer" title="
Fermer la fenêtre"><img alt="close.png" src="img/close0.png" style="border-width: 0px; border-style: solid; width: 24px; height: 24px; margin:-5px 0 0 0 ;" /></a>
            <h2>Le titre de la fenêtre « modale »</h2>
        </header>

        <section>
                <p>Exemples de contenu : vidéo, image, texte...</p>
            
            <div style="background-color: transparent; max-height: 200px; margin: 10px auto; padding: 10px ; overflow: auto;">
                <p>Du texte...</p>
                <p>Du texte...</p>
                <p>Du texte...</p>
            </div>
        </section>

        <footer class="cf">
            <a class="droite" href="#fermer" title="
Fermer la fenêtre">Fermer</a>
        </footer>
    </div>
</div><!--fin oModal-->

<p style="text-align: center;"><span style="font-size:20px;"><a href="#oModal">Cliquer pour ouvrir le popup</a></span></p><!--lien vers oModal-->

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 : close1.png close1hover.png

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.


Date de création : 13/02/2019
Catégorie : Astuces - Autres astuces en CSS
Page lue 3097 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » CSS Fenêtre modale

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 45 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
16 Abonnés