Problème fermeture lightbox

alexNzo Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -  
alexNzo Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'ai créé une lightbox avec CallToAction pour inciter les visiteurs à s'inscrire,

Le résultat à l'affichage est propre, seul bémol, je n'arrive pas à fermer la lightbox au clic sur la croix...

Voici le lien vers ma page test, ou tu trouveras la lightbox en question, en bas à droite ("Bienvenue dans notre clan")

http://greatfrencharmy.e-monsite.com/pages/page-test.html

J'aimerais que cette lightbox soit :

1- en page d'accueil du site
2- elle sert à inciter l'utilisateur à s'inscrire en tant que membre (renvoie au formulaire d'inscription)

Jusque là pas de problème, c'est là que ça se complique :)

3- caler le bouton de fermeture dans l'angle haut droit et caler l'image sur la croix
4- pouvoir fermer la lightbox en cliquant sur le bouton de fermeture
5- une fois connecté au site en tant que membre, la lightbox doit disparaitre (et réapparaitre une fois déconnecté)


Voici mon code HTML :

<div id="uix_welcomeBlock" class="uix_welcomeBlock_fixed">
<div class="uix_welcomeBlock_wrap">
<div class="uix_welcomeBlock_content">
<h3><span style="color: #ffffff;">Bienvenue sur<br /></span><span style="color: #ffffff;">notre Clan</span></h3>
<p class="uix_welcomeBlockMessage">Vous souhaitez rejoindre nos membres et voir tous nos trucs et astuces ? Inscrivez-vous gratuitement dès maintenant.</p>
<div class="button-wrapper"><a class="btn btn-primary" href="http://greatfrencharmy.e-monsite.com/members/subscribe/">Inscription</a></div>
<a style="float: right; background: url('http://static.e-monsite.com/ads/adclose.png') repeat scroll 0 -30px transparent; cursor: pointer; text-indent: -5000000px; height: 30px; margin: -230px -12px 0 -5px; width: 30px; z-index: 1103;" onclick="uix_welcomeBlock.uix_welcomeBlock_fixed.close();" href="#">Close</a></div>
</div>
</div>



Et voici mon code CSS :

#uix_welcomeBlock {
color: rgb(84, 84, 84);
background-color: rgb(227, 239, 247);
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
margin: 0 0 16px;
border: 1px solid rgb(194, 218, 234);
-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;

padding: 0;
}

#uix_welcomeBlock .uix_welcomeBlock_content {
position: relative;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;

padding-left: 56px;

}

#uix_welcomeBlock a.close {
display: none;
position: absolute;
top: 8px;
right: 8px;
height: 24px;
width: 24px;
text-align:center;
}
#uix_welcomeBlock a.close:hover {cursor: pointer;}

#uix_welcomeBlock a.close:before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 24px;
content: "\f00d";
}

#uix_welcomeBlock h3.uix_welcomeBlockHeader span {
font-size: 18pt;
font-family: Lato, Helvetica, sans-serif;
line-height: 40px;


}

#uix_welcomeBlock .uix_welcomeBlockMessage {
line-height: 22px;
margin-bottom: 8px;
}

#uix_welcomeBlock .uix_welcomeBlockHeader .uix_icon {
font-size: 40px;
color: rgb(24, 77, 111);
margin-right: 8px;
float: left;
text-align: center;
width: 40px;
height: 40px;


margin-left: -48px;
}

#uix_welcomeBlock a.callToAction {margin-bottom: 8px;}


#uix_welcomeBlock.uix_welcomeBlock_fixed { 
color: rgb(227, 239, 247);
background-color: rgb(51, 51, 51);
padding: 8px;
border-style: none;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
left: auto;
right: 16px;
bottom: 16px;
-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,.1); -moz-box-shadow: 0 0 10px 2px rgba(0,0,0,.1); -khtml-box-shadow: 0 0 10px 2px rgba(0,0,0,.1); box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
width: 300px;


background-color: rgba(51, 51, 51, 0.9);
z-index: 72;
position: fixed;
margin: 0;
}

#uix_welcomeBlock.uix_welcomeBlock_fixed h3.uix_welcomeBlockHeader {margin-right: 24px;}

#uix_welcomeBlock.uix_welcomeBlock_fixed h3.uix_welcomeBlockHeader span {
color: rgb(227, 239, 247);
line-height: 30px;


}

#uix_welcomeBlock.uix_welcomeBlock_fixed .uix_welcomeBlockHeader .uix_icon {


}
#uix_welcomeBlock.uix_welcomeBlock_fixed .uix_welcomeBlockMessage {
color: rgb(227, 239, 247);
}
#uix_welcomeBlock.uix_welcomeBlock_fixed a.close {
color: rgb(227, 239, 247);
display: block;
}
A voir également:

1 réponse

alexNzo Messages postés 7 Date d'inscription   Statut Membre Dernière intervention   2
 
up, merci
0