圖片疊加層不起作用

Question

我嘗試對圖像進行覆蓋，但是有兩個問題：

 $(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> 

問題 ：

1. 我不知道#box在屏幕中間的位置。 左：30％不在屏幕中間。 我讀過其他問題，很多用戶建議使用相對位置的div並在其中使用絕對位置的div。 但是就我而言，這是不可能的。

2. 當框淡入，並且我調整窗口大小時，框是“出”窗口（原因是left屬性）

我希望你能幫助我！

對不起我的英語不好

謝謝！

Answer 1

在這個小提琴中，我既設置了不斷變化的顏色，又確保它始終位於中間，設置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定義

希望這對您有所幫助。