Display a div on click of an anchor via jquery

jquery css jquery-animate

17,734

Try this,

First make the css of "popupcontent" as

display:none;

when id1 is clicked then make its css to display:block;

$(document).ready(function() {  
    $("#id1").click(function() {  
         $(".popupcontent").css('display', 'block');     
    });  
});

Check the demo here
http://jsfiddle.net/naresh3591/M5ahr/4/

17,734

Author by

Pooja

Updated on June 05, 2022

Comments

Pooja almost 2 years

Whenever I click on the anchor i want the div popup content to get displayed.But with this code it is not happening.

    <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>

the css file contains the following code. I have made the opacity of this div 0 so that it remains hidden initially. When user clicks on a link i have changed the opacity to 1 using animate. But still it is not getting displayed

   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{

}

I have placed these links on the top of an image.