Le besoin spécifique
Aujourd'hui, je vous présente un petit plugin que j'ai écrit, afin de pouvoir afficher au moyen d'un short code, et donc d'un plugin pour jumia, une fenêtre modale 100 % CSS.
Rendons à César ce qui appartient à Jules
Pour ce petit plugin, je me suis inspiré du travail de Marko que vous pourrez bien évidemment retrouver sur codepen.io. Son très joli travail vous permet d'afficher une fenêtre modale, simplement avec un CSS particulier et de éléments dans votre page web : un élément que je qualifierais de déclencheurs, associé à un deuxième élément qui est ni plus ni moins que le contenu de la fenêtre modale. Un beau travail.
Utilisation de mon plugin
J'ai intégré le travail de cet auteur dans mon plugin Joomla. En effet, si vous utilisez la commande
{cssmodal "déclencheur" "titre fenêtre" "contenu fenêtre"}avec obligation d'utiliser des doubles cotes, vous vous retrouverez avec un simple bouton dans votre code qui en sera le contenu de votre modale.
Les paramètres se décomposent ainsi :
1. déclencheur : c'est une chaîne de caractère, qui peut bien entendu comprendre la balise IMG, sur Yake l'utilisateur va cliquer pour lancer sa fenêtre modale.
2. Titre fenêtre : vous pouvez attribuer un titre à chacune des fenêtres que vous lancez. Ce titre s'affiche en gras et en haut de la fenêtre modale.
3. Contenu fenêtre Le dernier paramètre est un simple contenu HTML, je n'ai cependant pas traiter l'intégration d'une feuille de style particulière à ce plugin. Si vous souhaitez rajouter un style particulier, je ne peux que vous conseiller d'éditer la feuille de style que je joins à mon plugin.
cssmodal.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentCssModal extends JPlugin
{
function onContentPrepare($content, $article, $params, $limit){
$document = JFactory::getDocument();
$document->addStyleSheet('plugins/content/cssmodal/style.css');
$re = '/{cssmodal\s*"(.*)"\s*"(.*)"\s*"(.*)"}/m';
preg_match_all($re, $article->text, $matches, PREG_SET_ORDER, 0);
foreach($matches as $unElt)
{
echo "<pre>";
print_r($unElt);
echo "</pre>";
$str= ' <div class="wrapper">
<a href="#demo-modal">'.$unElt[1].'</a>
</div>
<div id="demo-modal" class="sebmodal">
<div class="sebmodal__content">
<h1>'.$unElt[2].'</h1>
<p>'.$unElt[3].'</p>
<a href="#" class="sebmodal__close">×</a>
</div>
</div>';
$article->text = str_replace($unElt[0],$str,$article->text);
}
}
}cssmodal.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.0" type="plugin" group="Content">
<name>CSSModal</name>
<author>Sebastien LHUILLIER</author>
<creationDate>Mars 2024</creationDate>
<copyright>Sébastien LHUILLIER</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<authorEmail>Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.</authorEmail>
<authorUrl>www.sebastien-lhuillier.com</authorUrl>
<version>1.0</version>
<description>Ce plugin permet de générer une fenetre modale full CSS</description>
<files>
<filename plugin="cssmodal">cssmodal.php</filename>
<filename>cssmodal.xml</filename>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field name="note1" type="note" class="alert" label="Mode d'emploi" description='{cssmodal "DECLENCHEUR" "TITRE" "HTM_CONTENU"}'/>
</fieldset>
</fields>
</config>
</extension>style.css
.wrapper {
/* height: 100vh;*/
/* This part is important for centering the content */
/*/ display: flex;
align-items: center;
justify-content: center;
/* End center */
/* background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
background: linear-gradient(to right, #834d9b, #d04ed6);*/
}
.wrapper a {
display: inline-block;
text-decoration: none;
padding: 15px;
background-color: #fff;
border-radius: 3px;
/*text-transform: uppercase;*/
color: #585858;
border:2px solid black;
text-decoration:none;
/* font-px solid black;family: 'Roboto', sans-serif;*/
}
.sebmodal {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(77, 77, 77, .7);
transition: all .4s;
}
.sebmodal:target {
visibility: visible;
opacity: 1;
}
.sebmodal__content {
border-radius: 4px;
position: relative;
width: 500px;
max-width: 90%;
background: #fff;
padding: 1em 2em;
}
.sebmodal__footer {
text-align: right;
a {
color: #585858;
}
i {
color: #d02d2c;
}
}
.sebmodal__close {
position: absolute;
top: 10px;
right: 10px;
color: #585858;
text-decoration: none;
background-color: red;
width: 25px;
height: 25px;
border-radius: 12px;
color: wheat;
font-size: 150%;
padding-top: 0.9%;
}
.sebmodal__close:hover {
color: white;
text-decoration: none;
}