2

クリックしてフルサイズの画像をポップアップdivとして開くことができるサムネイル画像があります。

そのポップアップの閉じるボタンを境界線の右上隅に配置しますが、画像自体には配置しません。私がやろうとしていることの別のサイトからのスクリーンショットの例と、私のものの例を添付しました。

私が欲しいもの：

ここに画像の説明を入力してください

私が持っているもの：

ここに画像の説明を入力してください

これが私のHTMLです：

<div id="blanket" style="display:none;"></div>
    <div id="popUpDiv" style="display:none;">
        <a href="#" onclick="popup('popUpDiv')"><img src="images/close.png" align=right></a><img src="images/largeimg.jpg" width=551 height=750>
    </div>  
  <h1><a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a></h1>
</div>

そして私のCSS：

#blanket {
   background-color:#111;
   opacity: 0.65;
   position:absolute;
   z-index: 9001; 
   top:0px;
   left:0px;
   width:100%;
}

#popUpDiv {
    position:absolute;
    background-color:white;
    width:551px;
    height:779px;
border:10px solid white;
    z-index: 9002; 
}

ボタンの画像の高さのために余分な空白が発生しないように、閉じるボタンを境界線上に移動するにはどうすればよいですか？

4

2 に答える 2

4

車輪の再発明をしないでください。提供したスクリーンショットは、ファンシーボックスによく似ています。jqueryプラグイン。代わりにそれを使用してください。これまたは他の主な同様のjQueryプラグインの1つを使用して、セルフクロスブラウザの頭痛の種を保存します。

于 2012-07-30T06:32:36.527 に答える
4

ここに作業フィドルがあります

CSS

#blanket {
   background-color:#111;
   opacity: 0.65;
   position:fixed;
   z-index: 9001; 
   top:0px;
   left:0px;
   width:100%;
    height:100%;
}

#popUpDiv {
    position:relative;
    background-color:white;
    width:551px;
    margin:10% auto 0 auto;
    height:259px;
border:10px solid white;
    z-index: 9002; 

}
.close{position:absolute; right:-25px; top:-25px;}

</p>

于 2012-07-30T06:44:23.277 に答える