0

HERE私の問題を説明するサンプルがあります。

41 行目までスクロールすると、固定ボックスの表示/非表示を切り替えることができます。期待どおりに動作します。半透明のボックスが非表示になり、ページは静かなままです。ただし、下の画像をクリックすると、ボックスも非表示になりますが、ページは上にスクロールします。

どうすればそれを回避し、ユーザーがスクロールした場所でページを修正できますか?

<div id="container">
    <div id="box" class="oculto">BOX BOX</div>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
    21<br>32<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
    31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>

    <button onclick="$('#box').hide();">Hide the box </button><br>  
    <button onclick="$('#box').show();">Show the box </button><br>     
    <img src="http://static.adzerk.net/Advertisers/4c4f1be011a447efbce49c1811022e7a.png" width="330" border="0" usemap="#Map" /> 

 </div>

<map name="Map" id="Map">
<area shape="rect" coords="3,3,320,84" href="#" onclick="$('#box').hide();"/>

CSS

#container {
width: 400px;
background-color:yellow;
position:relative; 
z-index:2;
min-height:1000px;
}

#box{
width:400px; 
height:100px;
position:fixed;
top:0;
z-index:100000;
background-color:black;
color:yellow;
opacity:0.5;
padding:10px;
}
4

1 に答える 1

1

マップ上の href を削除するだけです。私はあなたの jsfiddle をフォークしました。

<area shape="rect" coords="3,3,320,84" onclick="$('#box').hide();"/>
于 2012-11-01T23:17:14.803 に答える