04/05/2012, 14:15:17
Créé une balise utilisateur "cookies"
créé un bloc de contenu global "popup_content"
Dans ton gabarit ajouter la lib Jquery avant </head> si besoin et ajouter également {cookies} avant </head>.
Dans ton gabarit avant </body> ajouter {global_content name='popup_content'}
Le CSS utilisé :
et enfin l'image servant pour la croix à placer dans /uploads/styles/corporate/images/close.png :![[Image: close.png]](http://www.cmsmadesimple.fr/uploads/styles/corporate/images/close.png)
ça devrait être a peu près bon
Code :
$html = "";
if (!isset($_COOKIE['cmsms']) || $_COOKIE['cmsms']!="1"){
$html = <<<HTML
<script type="text/javascript">
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) +
$(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) +
$(window).scrollLeft() + "px");
return this;
}
$(document).ready(function() {
$('#popupNews , #popupNews_content').show();
$('#popupNews_content').center();
$('#popupNews, #popupNews_close').click(function() {
$('#popupNews , .popupNews_content').fadeOut(function() {
$('#popupNews , #popupNews_content').remove();
});
return false;
});
});
</script>
HTML;
}
// on crée le cookie,
$cookie_name = "cmsms";
$cookie_value = "1";
$cookie_expire = 30*24*60*60; // 2592000 secondes = 30 jours
setcookie($cookie_name, $cookie_value, time()+$cookie_expire, '/');
echo $html;créé un bloc de contenu global "popup_content"
Code :
<div id="popupNews"></div>
<div id="popupNews_content"><div id='popupNews_close'>fermer</div>
<h2 class="orangeh2">VOTRE TITRE</h2>
{* AJOUTEZ CE QUE VOUS VOULEZ ICI, APPEL A MODULE OU SIMPLE TEXTE *}
<div>{News number=1 summarytemplate='popup' showdraft='1'}</div>
<p>Et pour ne louper aucune actualité. Vous pouvez vous abonner aux <a href="http://www.cmsmadesimple.fr/feeds/news.rss" target="_blank">flux rss</a>, nous rejoindre sur notre <a href="https://www.facebook.com/pages/CmsMadeSimple-Fr/183809018317285" target="_blank">facebook</a> et notre <a href="https://twitter.com/#!/cmsmadesimplefr" target="_blank">twitter</a>. Vous pouvez également vous inscrire sur la <a href="http://www.cmsmadesimple.fr">page d'accueil</a> à la Newsletter.</p>
{* FIN DE VOTRE AJOUT *}
</div>Dans ton gabarit ajouter la lib Jquery avant </head> si besoin et ajouter également {cookies} avant </head>.
Dans ton gabarit avant </body> ajouter {global_content name='popup_content'}
Le CSS utilisé :
Code :
[[strip]]
#popupNews{
display: none;
background-color:#000;
opacity:0.8;
filter : alpha(opacity=80);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2000;
}
#popupNews_content{
text-align: justify;
position: fixed;
top:30%;
width: 400px;
background-color:#000;
z-index:2001;
padding:3px 10px;
margin:0px auto;
display: none;
border: 1px solid #303030;
border-radius:15px;
box-shadow: 5px 5px 12px #444;
}
#popupNews_content h2.orangeh2{
line-height:1.5em;
margin:0 0 0.5em 4px;
padding-bottom:1px;
padding-left:1em;
text-align:left;
font-size:1.5em;
color: #9D501E;
}
#popupNews_close{
text-decoration: none;
text-indent: -999em;
float: right;
height: 30px;
width: 30px;
margin-right: -15px;
margin-top: -15px;
cursor: pointer;
background:url([[root_url]]/uploads/styles/corporate/images/close.png) no-repeat;
}
.popupNewsSummary{
border-left: 1px dotted #CCCCCC;
font-size: 1.2em;
line-height: 1.1em;
margin: 5px 0 15px 5px;
padding-left: 10px;
}
#popupNews_content a.popup_more{
border-left: 1px dotted #888888;
cursor: pointer;
display: block;
padding: 0 0 0 10px;
text-decoration: none;
color: #A3A0A0;
font-size: 0.9em;
margin-bottom: 10px;
}
.popupNews_content a{
color: #FFFFFF;
text-decoration: underline;
}
a.popupNews_more{
}
*html #popupNews{
position: absolute;
}
*html #popupNews_content {
position: absolute;
}
[[/strip]]et enfin l'image servant pour la croix à placer dans /uploads/styles/corporate/images/close.png :
ça devrait être a peu près bon