Как получить изображение в фокусе, когда я нажимаю на него?

Instagram и Twitter имеют эту вещь, когда изображение нажимается, изображение увеличивается и почти становится z-углом, в то время как фон серый и есть ли фон, z-index? Я хочу знать, как это сделать? Я хочу, чтобы нажать на миниатюру, увеличить изображение и поместить все в фоновом режиме, как будто это не фокус. (Изображения в ЦСИ не являются реальными изображениями, просто пример.)Как получить изображение в фокусе, когда я нажимаю на него?

<div id = "queryimages" onclick = "myImage()"> 

<img src = "picture.gif" alt = "picture"> 
<img src = "picture.gif" alt = "picture"> 
<img src = "picture.gif" alt = "picture"> 
<img src = "picture.gif" alt = "picture"> 

</div> 

<script> 
function myImage(){ 
var getPic = document.queryselectorAll("#queryimages"); 
var i; 
for(i = 0; i < getPic.length;i++){ 
    if(getPic){ 
    getPic[i].style.width = "400px"; 
    getPic[i].style.width = "300px"; 
    getPic[i].style.position = "absolute"; 
    getPic[i].style.top = "screen.height/2"; 
    getPic[i].style.left = "0px"; 
    getPic[i].style.right = "0px"; 
    document.body.style.backgroundColor = "grey"; 
    } 
} 
} 
</script>

источник

2015-06-23 chris

Это известно как модальностей. Взгляните на этот вопрос: http://stackoverflow.com/questions/650322/modal-image-popups –