在图像jQuery上覆盖一个div

debugcn 发表于 Dev

mmdwc

我正在尝试通过单击图像来显示div。div将包含图像或视频。我将点击几张图片，并附加内容。使用我的实际JS，在图像上单击时会显示所有div。我使用“自定义字段”输入图片和iframe，因此我的代码必须是动态的。我不知道该如何解决。同样在我的实际代码中，当在div外部单击时div消失了，我想在其上添加文本链接以将其关闭。

这是mu JS：

$(document).ready(function(){
  $(".mix").click(function(){
    $(".photos_overlay").toggle();
  });
});

我的HTML：

<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364"  src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>

和我的CSS：

.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}

这是JSfidlle可以看到它的实际效果：http : //jsfiddle.net/aaWLJ/12/

有人可以帮我吗？

非常感谢你的帮助，

帕夫洛

我对您的代码做了一些修改：
HTML

<br />
<div class="mix photos" data-myorder="20140307">
    <div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>

<div class="photos_overlay" data-myorder="20140307">
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
    <div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
    <iframe width="706" height="364"  src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>

如您所见，我div为叠加层和divCloseMe添加了父元素。

此外，我还更改了一些CSS（您可以将其更改为所需的内容，我只想向您展示如何解决问题的主要思想）：

.photos_overlay{
    width:967px;
    height:384px;
    background-color:black;
    position:absolute;
    top:20px; /* I have changed top position just to show the div 'CloseMe'*/
    left:0;
    display:none
}

和JavaScript代码

$(document).ready(function(){
  $(".mix").click(function(){
    ShowHide($(this));
  });
  $(".closeFrame").click(function(){
    ShowHide($(this));
  });

  function ShowHide(elem){
    var $mix = $(elem);
    $mix.children(".closeFrame").toggle();
    $mix.next(".photos_overlay").toggle();
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。