Fenêtre popup qui ne s'affiche pas comme désiré

Voir le sujet précédent Voir le sujet suivant Aller en bas

En cours Fenêtre popup qui ne s'affiche pas comme désiré

Message par frangegars le Mar 19 Juin 2012 - 12:46

Bonjour ! J'ai trouvé le tutoriel suivant pour faire apparaitre une fenêtre popup lorsque l'on passe la souris sur un lien :ICI.

Seulement voilà, lorsque j'insère le code sur mon forum, il y a bien un popup qui s'ouvre, mais il n'est ni transparent, ne s'ouvre pas en faisant une "rotation" et ne met pas 25 seconde à s'ouvrir. Je ne comprends pas pourquoi. Voici le code que j'ai mis sur ma feuille CSS :

Code:
a:focus{
    background:#000000;
    box-shadow:0 1px 0 #000000;
}

a:hover span {
  transform:scale(1) rotate(0);
  opacity:1;
}
 
a:focus span{
    transform:scale(1) rotate(0);
  opacity:1;
}

a span{
    position:absolute;
margin-top:23px;
    margin-left:-35px;
  color:#000000;
    background:#ffffff;
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px #000000;
  transform: scale (0) rotate(-12deg);
  transition: 25s;
  opacity:0;
}

et voici le code HTML utilisé (en l'occurrence j'aimerais que le popup s'affiche au passage de la souris sur une image et non un lien à proprement dit) :
Code:
<p><a href="#"><img src="http://i49.tinypic.com/hx9r9t.gif"><span>I'm a popup...</span></a>
</p>

J'ai supprimé les parties :
Code:
a{
    color:#ccc;
    text-shadow:0 -1px 0 black;             
}
a:hover {
    background:rgba(0,0,0,.4);
    box-shadow:0 1px 0 rgba(255,255,255,.4);
}
car après tous les liens de mon forum se voyaient entouré d'une ombre et d'un carré noir au passage de la souris.

Voilà, en espérant que vous pourrez m'aider, je vous remercie d'avance Very Happy

frangegars
*

Messages : 32
Inscrit(e) le : 25/02/2012

http://loading-rpg.forumactif.org/forum?tt=1
frangegars a été remercié(e) par l'auteur de ce sujet.

En cours Re: Fenêtre popup qui ne s'affiche pas comme désiré

Message par tupac le Mar 19 Juin 2012 - 15:47

Bonjour

Essayer avec les codes suivants.

Code:
 <section id="article34" class="crayon article-css-34 demoTime">
          <p><a href="#">Hover me !<span>Hello. I’m a popup...</span></a></p>
 </section>
Le css

Code:
#article34 a span{
position:absolute;
padding:15px;
margin-top:23px;
margin-left:-35px;
background:rgba(0,0,0,.9);
opacity:0;
color:#09C;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
  -moz-transform:scale(0) rotate(-12deg);
    -ms-transform:scale(0) rotateZ(-12deg);
    -o-transform:scale(0) rotate(-12deg);
        transform:scale(0) rotateZ(-12deg);
/*transition*/
-webkit-transition:all .25s;
  -moz-transition:all .25s;
    -ms-transition:all .25s;
    -o-transition:all .25s;
        transition:all .25s;
/*border-radius*/
-webkit-border-radius:3px;
  -moz-border-radius:3px;
        border-radius:3px;
/*box-shadow*/
-webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
        box-shadow:0 0 2px rgba(0,0,0,.5);
}
#article34 a:hover span,#article34 a:focus span{
opacity:1;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
  -moz-transform:scale(1) rotate(0);
    -ms-transform:scale(1) rotateZ(0);
    -o-transform:scale(1) rotate(0);
        transform:scale(1) rotateZ(0);
}

#article34 a span::before{
content:'';
position:absolute;
top:-6px;
left:10px;
width:0;
height:0;
border-bottom:6px solid rgba(0,0,0,.9);
border-left:6px solid transparent;
border-right:6px solid transparent;
}

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

En cours Re: Fenêtre popup qui ne s'affiche pas comme désiré

Message par frangegars le Mar 19 Juin 2012 - 16:07

ça fonctionne ! Merci mille fois Very Happy !!
Par contre, pour agrandir la taille de la case, je dois modifier quelles valeurs ? Je ne trouve pas de "height" ou de "width"

frangegars
*

Messages : 32
Inscrit(e) le : 25/02/2012

http://loading-rpg.forumactif.org/forum?tt=1
frangegars a été remercié(e) par l'auteur de ce sujet.

En cours Re: Fenêtre popup qui ne s'affiche pas comme désiré

Message par Pinguino le Mar 19 Juin 2012 - 16:09

@frangegars a écrit:ça fonctionne ! Merci mille fois Very Happy !!
Par contre, pour agrandir la taille de la case, je dois modifier quelles valeurs ? Je ne trouve pas de "height" ou de "width"

Bonjour,


Ligne 45 et 46 :

Code:
        #article34 a span{
        position:absolute;
        padding:15px;
        margin-top:23px;
        margin-left:-35px;
        background:rgba(0,0,0,.9);
        opacity:0;
        color:#09C;
        /*transform*/
        -webkit-transform:scale(0) rotateZ(-12deg);
          -moz-transform:scale(0) rotate(-12deg);
            -ms-transform:scale(0) rotateZ(-12deg);
            -o-transform:scale(0) rotate(-12deg);
                transform:scale(0) rotateZ(-12deg);
        /*transition*/
        -webkit-transition:all .25s;
          -moz-transition:all .25s;
            -ms-transition:all .25s;
            -o-transition:all .25s;
                transition:all .25s;
        /*border-radius*/
        -webkit-border-radius:3px;
          -moz-border-radius:3px;
                border-radius:3px;
        /*box-shadow*/
        -webkit-box-shadow:0 0 2px rgba(0,0,0,.5);
          -moz-box-shadow:0 0 2px rgba(0,0,0,.5);
                box-shadow:0 0 2px rgba(0,0,0,.5);
        }
        #article34 a:hover span,#article34 a:focus span{
        opacity:1;
        /*transform*/
        -webkit-transform:scale(1) rotateZ(0);
          -moz-transform:scale(1) rotate(0);
            -ms-transform:scale(1) rotateZ(0);
            -o-transform:scale(1) rotate(0);
                transform:scale(1) rotateZ(0);
        }
       
        #article34 a span::before{
        content:'';
        position:absolute;
        top:-6px;
        left:10px;
        width:0;
        height:0;
        border-bottom:6px solid rgba(0,0,0,.9);
        border-left:6px solid transparent;
        border-right:6px solid transparent;
        }

Cordialement,
Smile

Pinguino
Adminactif
Adminactif

Masculin
Messages : 10213
Inscrit(e) le : 02/05/2004

http://www.forumactif.com
Pinguino a été remercié(e) par l'auteur de ce sujet.

En cours Re: Fenêtre popup qui ne s'affiche pas comme désiré

Message par frangegars le Mar 19 Juin 2012 - 16:11

Ha voilà, aveugle que je suis >< !!

Merci beaucoup pour cette aide précieuse !

Bonne fin de journée

frangegars
*

Messages : 32
Inscrit(e) le : 25/02/2012

http://loading-rpg.forumactif.org/forum?tt=1
frangegars a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum