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-index 和宽度很重要

于 2013-07-22T09:28:03.893 回答