Накладка для изображений не работает

Question

я пытался сделать накладку для изображений, но у меня есть 2 проблемы:

$(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. I не знаю, как позиция #box в середине экрана. С слева: 30% он не находится в середине экрана. Я прочитал другой вопрос, в котором многие пользователи предлагают использовать div с относительной позицией и внутри него div с абсолютной позицией. Но в моем случае я думаю, что это невозможно.

2. когда коробка FadeIn, и я изменить размер окна, окно «из» окна (причина остается собственностью)

Я надеюсь, что вы можете мне помочь!

Извините за мой английский

Спасибо!

Answer 1

Я эта скрипка Я установил и ваш изменяющийся цвет и убедился, что он всегда посередине, установка слева: 50% и translate3d -50% всегда будут устанавливать его в центр из-за абсолютной позиции, если вы хотите также вертикальное позиционирование сделать то же самое для верхней и -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 defenitions

Надеюсь, это вам помогло.