爲什麼圖像不能全屏顯示？

Question

我試圖在image click的全屏幕上顯示圖像。換句話說O映像的點擊它會全屏顯示

我想這樣，但不工作

$(".imageBlock").click(function() { 
    $('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'}) 
}); 

https://jsbin.com/hayalobixo/1/edit?html,css,js,output

$(function() { 

    var counter = 0; 
    $('.currentPage').text(counter+1); 
    $('#pre').prop('disabled', true); 

    $('#next').click(function() { 
    if (counter < 4) { 
     counter++; 
     $('.imageBlock').hide(); 
     $('.imageBlock').eq(counter).show(); 
    } 
    $('.currentPage').text(counter+1); 
    }) 
    $('#pre').click(function() { 
    if (counter > 0) { 
     counter--; 
     $('.imageBlock').hide(); 
     $('.imageBlock').eq(counter).show(); 
    } 
    $('.currentPage').text(counter+1); 
    }) 

    $('#next, #pre').click(function() { 
    if (counter == 0) { 
     $('#pre').prop('disabled', true); 
    } else if (counter == 4) { 
     $('#next').prop('disabled', true); 
    } else { 
     $('#pre').prop('disabled', false); 
     $('#next').prop('disabled', false); 
    } 
    }) 

    $(".imageBlock").click(function() { 
    $('.imageBlock').css({'width':'100%','height':'100%','z-index':'9999'}) 
}); 

}) 

Answer 1

CSS：

div.imageBlock.full{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

JS：

$(".imageBlock").click(function() { 
    $('.imageBlock').addClass("full"); 
}); 

Answer 2

可以使用 - 格設置爲絕對定位

$(function() { 

    $(".imageBlock").click(function() { 
    $(this).css({'width':'100%','height':'100%','z-index':'9999','position':'absolute'}) 
}); 

https://jsbin.com/kowogukave/edit?html,css,js,console,output