javascript - 图片叠加层不起作用

我尝试对图像进行覆盖，但是有两个问题：

$(document).ready(function () {
  $('#boximmagini img').click(function(){
    $("#immagine img:last-child").remove()
    var source= $(this).attr('src');
    $('#immagine').append("<img src="+source+"/>")
    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');
  });
  $(".chiudi").click(function(){
    $('#overlay').fadeOut('fast');
    $('#box').hide();
  });
  $("#overlay").click(function(){
    $(this).fadeOut('fast');
    $('#box').hide();
  });
});

.chiudi{
  cursor:pointer;
}
.overlay{
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
  cursor:pointer;
}

#box{
  width:600px;
  height:400px;
  display:none;
  z-index:+300;
  position:absolute;
  left:30%;
  top:20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
  <div class="chiudi">CHIUDI</div><br>
  <div id="immagine"></div>
</div>
<div id="boximmagini">
  <div><b>Clicca</b></div>
  <img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>

问题：


我不知道#box在屏幕中间的位置。左：30％不在屏幕中间。我读过其他问题，很多用户建议使用相对位置的div并在其中使用绝对位置的div。但就我而言，我认为那是不可能的。
当框淡入，并且我调整窗口大小时，框是“出”窗口（原因是left属性）


我希望你能帮助我！

对不起我的英语不好

谢谢！

最佳答案

在这个小提琴中，我既设置了不断变化的颜色，又确保它始终位于中间，设置left：50％和translate3d -50％总是将其设置为中心，因为位置是绝对的，如果您还希望垂直定位的话对top相同，对y（第二个参数）为-50％：http://jsfiddle.net/whb3mpg4/7/

#box{
  width:600px;
  height:400px;
  display:none;
  z-index: 300;
  position:absolute;
  top:20%;
  left:50%;
  transform: translate3d(-50%,0,0);
}

#box img{
    position:absolute;
    left:50%;
    transform: translate3d(-50%,0,0);
}

我知道我可以为两者使用相同的CSS类，但我想保持清晰，不要更改JS或CSS定义

希望这对您有所帮助。

关于javascript - 图片叠加层不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32668391/