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 -
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 :
Et voici mon code CSS :
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:
- Problème fermeture lightbox
- Sytadin fermeture - Télécharger - Transports & Cartes
- Forcer fermeture application windows - Guide
- Annuler fermeture onglet chrome - Guide
- Frais de fermeture compte paypal - Guide
- Fruitz fermeture - Accueil - Applications & Logiciels