0

画像をクリックしてdiv開いて、画像にズームされたバージョンを表示します。使用することで想定されていることを実行しjquery show(), and hide(), ますが、スタイルを設定する方法がわかりません。次のコードを使用しています:

<div id="mainImage">
  ;;;
</div>
<div id="zoomPdpImage" style="display:none;z-index:2000;background-color:silver;">
<div id="closeZoomImgButton">
<span class="ui-dialog-title" id="ui-dialog-title-dialog-form">&nbsp;</span>
    <a href="#" class="close" role="button">
        <span>close</span>          
    </a>
</div>
<img src="http://localhost:/..." alt="${imageAlt}" title="image"/>
</div>

そのためのスタイリング：

#closeZoomImgButton 
{
 width: auto;
 height: 30px;
 position: relative;
 text-align: center;
 background: #000 url("../images/Close_X_Icon.png") no-repeat 570px 10px;
}
#closeZoomImgButton .close 
{
  border:0 none;
  border-radius:0 0 0 0;
  height:32px;
  margin:0;
  padding:0;
  right:0;
  top:0;
  width:32px;
  position: absolute;
  display:none;
}
#closeZoomImgButton .close span{margin:0;padding:0;}
#closeZoomImgButton .close:hover, #closeZoomImgButton .close:focus { padding:0; }

そのため、ズームされた画像をクリックして閉じることができますが、ヘッダー全体がクリック可能になりました。閉じるボタンのみをクリック可能にし、クリック可能であることを知るためにフォーカスとホバー効果が必要です。

任意の提案をお願いします。

4

2 に答える 2

1

問題が何であるかがわかります。閉じるために ID をスパンに追加しませんでした。

ここで更新されたフィドルを参照してくださいhttp://jsfiddle.net/WFyMu/5/

私はこれを変更しました：

<span>close</span>

これに：

<span id="closeZoomImgButton">close</span>

閉じるスパンをクリックすると、非表示になります。しかし、これがあなたが望んでいたものかどうかはわかりませんか？

于 2013-07-22T09:58:28.463 に答える
0

このコードを使用して教えてください

     #closeZoomImgButton 
     {
      background: url("../images/Close_X_Icon.png") no-repeat scroll 0 0 transparent !important;
      cursor: pointer;
      height: 30px;
      left: 440px;
      position: absolute;
      top: -18px;
      width: 30px;
      z-index: 90003;
      }

位置、Z インデックス、および幅が重要です

于 2013-07-22T09:28:03.893 に答える