jireck
 118 
 Dev Team (TNT)
|  Posté : 28-06-2013 09:20
Alllezzz, voila l'exemple ... c'est une viellle procédure à remettre au gout du jour.
Le principe : prendre un lightbox quelconque et afficher le lien et le formulaire si l'utilisateur n'est pas connecter:
Voila comment faire avec un methode rapide, car je ne ferais plus comme cela maintenant ...
dans le header_head.inc du theme ou global
<?php
if (!$user){
?>
<script>
$(document).ready(function() {
//select all the a tag with& nbsp;name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link&n bsp;behavior
e.preventDefault();
//Get the A ta g
var id = $(thi s).attr('href');
//Get the screen&nb sp;height and width
var maskHeight =&nb sp;$(document).height();
var maskWidth =&nbs p;$(window).width();
//Set heigth and&nb sp;width to mask to fill up the whole s creen
$('#mask').css({'width':maskW idth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8) ;
//Get the window&nb sp;height and width
var winH = $(w indow).height();
var winW = $(w indow).width();
//Set the popup&nbs p;window to center
$(id).css('top', w inH/2-$(id).height()/2);
$(id).css('left', winW/2 -$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) ;{
//Cancel the link&n bsp;behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color 000;
display:none;
}
#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog1 {
width:375px;
height:203px;
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 0 8px rgba(0, 0, 0,&nb sp;0.3);
background:none repeat scroll 0 0 #FFFFF F;
}
/* a modifier suivant les themes*/
</style>
<?php
}
?>
Et avant la fin du html
dans le footer_before.inc
<?php
if (!$user){
?>
<form action="user.php" method="post" name="userlogi n">
<div id="boxes">
<div id="dialog1" class="window">
<h3>Connexion au Blog Jireck.fre e.fr</h3>
<p>
<input type="text" name="uname" val ue="username" !onclick!="this.value=''" /><br />
<input type="password" name="pass" value="Password" !onclick!="this.value=''" /><br />< br />
<input type="image" alt="Login" tit le="Login" />
</p>
</div>
<!-- Mask to cover the whole screen --& gt;
<div id="mask"></div>
</div>
<input type="hidden" name="op" value="login" />
</form>
<?php
}
?>
Voila
bien sur il faut Jquery
|
