3

アンカーをクリックするたびに、divポップアップコンテンツを表示したいのですが、このコードでは発生しません。

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

このcssファイルには次のコードが含まれています。このdiv0の不透明度を作成して、最初は非表示のままにしました。ユーザーがリンクをクリックすると、アニメーションを使用して不透明度を1に変更しました。しかし、それでも表示されません

   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{

}

これらのリンクを画像の上部に配置しました。

4

4 に答える 4

3

これを試して、

最初に「popupcontent」のcssを次のようにします 

display:none;

id1がクリックされたとき 、その css をdisplay:block;

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

ここでデモを確認してください
http://jsfiddle.net/naresh3591/M5ahr/4/

于 2012-06-22T12:26:53.327 に答える
0

フェードイン機能が使えます

$(".popupcontent").fadeIn();
于 2012-06-22T11:52:03.310 に答える
0

正常に動作しています。次のデモを参照してください：http：//jsfiddle.net/rathoreahsan/M5ahr/2/

しかし、これも試すことができます：

$(document).ready(function(){
  $("#id1").click(function(){
     $(".popupcontent").fadeTo('slow', '1.0');
  });
});

デモ：http： //jsfiddle.net/rathoreahsan/M5ahr/

于 2012-06-22T11:40:40.607 に答える
0 
 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").fadeIn("fast");
      });
   });

また

 $(document).ready(function(){
      $("#id1").click(function(){
          $(".popupcontent").show();
      });
   });
于 2012-06-22T11:49:58.413 に答える