Tweet
voilà encore une petite classe de ma composition qui permet d'afficher sous forme de popup un contenu de la page.
Extrait HTML:
Extrait CSS :
Classe Mootools :
Et le résultat en jsfiddle :
Peut-etre qu'un jour comme moi vous aurez besoin de faire un truc du genre et sans vouloir passer par des classes qui font des centaines de lignes pour rien (dans cette situation)
On va me dire quel avantage à mettre en place ce pov' truc plutot qu'une belle lightbox ? ...
tout simplement c'est qu'ici on affiche une partie de la page courante, utile pour les cas où on a un formulaire puisqu'on s'affranchit du souci de la transaction des données entre la page et la lightbox (vu qu'on ne quitte pas la page). C'est un exemple d'utilisation
Extrait HTML:
Code PHP:
<div id="cssModuleControlsEdit" class="cssButtonPopupOpen">Ouvrir le popup</div>
<div id="cssModuleFields" class="cssfieldsContainer">
<div id="cssModuleControlsClose" class="cssButtonPopupClose"> X </div>
Voilà la popup qui est ouverte
</div>
Code:
.cssButtonPopupOpen {
line-height: 30px;
border: 1px solid #fff;
margin: 10px 5px 0 5px;
padding: 0;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 14px;
cursor: pointer;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
background-color: #666;
}
.cssfieldsContainer {
position: fixed;
z-index: 100;
display: none;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
height: 200px;
width: 210px;
padding: 10px;
background: #f4f4f4;
-moz-box-shadow: 0 0 15px #888;
-webkit-box-shadow: 0 0 15px#888;
box-shadow: 0 0 15px #888;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
}
.cssButtonPopupClose {
display: block;
float: right;
width: 30px;
height: 30px;
background-position: 2px 2px;
background-repeat: no-repeat;
cursor: pointer;
border: 1px solid #fff;
background-color: #f4f4f4;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background-image: url(../images/delete.png);
}
Code PHP:
var popupCK = new Class({
options: {
popupuWindowId: 'cssModuleFields',
popupCloseButtonId: 'cssModuleControlsClose'
},
initialize: function(el, options) {
var el = document.id(el);
if (!el) return;
this.setOptions(options);
var popupuWindowId = this.options.popupuWindowId;
var popupCloseButtonId = this.options.popupCloseButtonId;
el.addEvent('click',function(){ document.id(popupuWindowId).setStyle('display','block');
});
document.id(popupCloseButtonId).addEvent('click',function(){
document.id(popupuWindowId).setStyle('display','none');
});
}
});
popupCK.implement(new Options);
new popupCK('cssModuleControlsEdit',{
popupuWindowId: 'cssModuleFields',
popupCloseButtonId: 'cssModuleControlsClose'
});
Peut-etre qu'un jour comme moi vous aurez besoin de faire un truc du genre et sans vouloir passer par des classes qui font des centaines de lignes pour rien (dans cette situation)
On va me dire quel avantage à mettre en place ce pov' truc plutot qu'une belle lightbox ? ...
tout simplement c'est qu'ici on affiche une partie de la page courante, utile pour les cas où on a un formulaire puisqu'on s'affranchit du souci de la transaction des données entre la page et la lightbox (vu qu'on ne quitte pas la page). C'est un exemple d'utilisation
Commentaire