Afficher une div sur cliquez sur une ancre via jquery

Chaque fois que je clique sur l'ancre, je veux la div popup contenu affiché.Mais avec ce code, il n'est pas le cas.

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ZoomMap Example</title>

    <link rel="stylesheet" type="text/css" href="mymap.css" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#id1").click(function(){
  $(".popupcontent").animate({opacity:1.0});

});
});
</script>


</head>
<body>

<h1>Manana</h1>

        <div id="container">            

            <div id="map">

                <img src="images/map.png"/>

            <a class="pointer" id="id1" href="#" >a </a>
            <a class="pointer" id="id2" href="#" > </a>
            <a class="pointer" id="id3" href="#" > </a>
            <a class="pointer" id="id4" href="#" > </a>
            <a class="pointer" id="id5" href="#" > </a>

                <div class="popupcontent">
                             <p></p>
                        </div>

            </div>
        </div>


</body>
</html>

la css fichier contient le code suivant. J'ai fait de l'opacité de cette div 0 pour qu'il reste caché à l'origine. Lorsque l'utilisateur clique sur un lien j'ai changé l'opacité à 1 à l'aide de l'animer. Mais encore, il n'est pas affiché

   body{
margin:0;
padding:0;

}


#map{
dsplay:block;
margin:0;
padding:0;
width:600px;
height:300px;
position:absolute;
top:20%;
left:20%;

}

#map img{
margin:0;
padding:0;
width:600px;
height:300px;

z-index:1;

}
#map .pointer{
margin:0;
padding:0;
display: block;
 position: absolute; 
width: 5px; 
height: 5px; 
background: red; 
text-decoration: none; 
border: 1px solid red; 
opacity: .7;
z-index:2;
}

#map a.bullet {  z-index: 2; }


#map #id1{
left:123px;
top:40px;
}

#map #id2{
left:90px;
top:210px;
}

#map #id3{
left:225px;
top:20px;
}

#map #id4{
left:320px;
top:195px;
}

#map #id5{
left:425px;
top:20px;
}


#map .popupcontent{
background-color:yellow;
border-style:groove;
border-color:grey;
height:100px;
width:150px;
position:absolute;
top:30%;
left:30%;
opacity:0;
z-index:13;

}

#map .popupcontent p{

}

J'ai mis ces liens sur le sommet d'une image.

Aussi je veux que la div d'en ressortir avec un peu de contenu.
Hiya @Pooja Howz il du tout mec: cela semble être au travail ici: jsfiddle.net/vPCf7/1 ;) espérons que cette aide
<a class="pointer" id="id1" href="#" > </a> Votre point d'ancrage n'a pas de texte à cliquer. Consultez ici votre code est: jsfiddle.net/5M9qg
c'est mon code complet
jsfiddle.net/M5ahr/3 Il travaille ici, mais pas sur mon pc. Je ne sais pas pourquoi 🙁

OriginalL'auteur Pooja | 2012-06-22

2

Essayer cela,

D'abord faire le css de "popupcontent" comme
```
display:none;  
```
quand id1 est cliqué ensuite css pour display:block;
```
$(document).ready(function() {  
    $("#id1").click(function() {  
         $(".popupcontent").css('display', 'block');     
    });  
});
```
Vérifier la démo ici

http://jsfiddle.net/naresh3591/M5ahr/4/

toujours pas de travail
vérifier jsfiddle.net/naresh3591/M5ahr/4

OriginalL'auteur Naresh.P
0

Il fonctionne très bien, voir cette démo: http://jsfiddle.net/rathoreahsan/M5ahr/2/

Mais vous pouvez essayer aussi ceci:
```
$(document).ready(function(){
  $("#id1").click(function(){
     $(".popupcontent").fadeTo('slow', '1.0');
  });
});
```
DÉMO: http://jsfiddle.net/rathoreahsan/M5ahr/

OriginalL'auteur Ahsan Rathod
0

Vous pouvez utiliser la fonction fadeIn
```
$(".popupcontent").fadeIn();
```
OriginalL'auteur Miqdad Ali

 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").fadeIn("fast");
      });
   });

 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").show();
      });
   });

Mon code est toujours pas de travail. J'ai coller mon code entier

OriginalL'auteur Ajai

Vous devez vous connecter pour publier un commentaire.