div의 '전체 화면'을 버튼 하나에 만드시겠습니까?

Question

저는 전체 화면 (100 % 너비/높이의 창 크기)으로 이동하려는 div가 있습니다. onClick은 별도 버튼, 이미지 또는 링크로 구성됩니다. Javascript/jQuery를 사용하면 어떻게 될까요?

Answer 1

HTML5 fullscreen API이 있지만 생산을 위해 충분히 지원되지 않습니다.

이 작업을 시도 할 수 있습니다 :

$('#theButton').click(function() { 
    $('#theDiv').css({ 
     position: 'fixed', 
     top: 0, 
     right: 0, 
     bottom: 0, 
     left: 0, 
     zIndex: 999 
    }); 
}); 

Answer 2

방법에 대해 :

#HTML 
<div id="some_id"></div> 
<div id="button"></div> 

#JS 
$('#button').click(function() { 
    $('#some_id').width($(window).width()); 
    $('#some_id').height($(window).height()); 
}); 

Answer 3

당신이

를 사용 후 폭과 높이

$(window).width(); 
$(window).height(); 

$(document).width(); 
$(document).height(); 

를 얻을이 기능을 사용할 수 있습니다

var w = $(document).width(); 
var h = $(document).height(); 
$("#theid").css('width',w); 
$("#theid").css('height',h); 

Answer 4

여기 어제 내 대답의 불통 버전 : 당신은 배경색이없는 경우

DEMO

$(':button').click(function() { 
    $('div > div').css({ 
     position:'absolute', //or fixed depending on needs 
     top: $(window).scrollTop(), // top pos based on scoll pos 
     left: 0, 
     height: '100%', 
     width: '100%' 
    }); 
}); 

Answer 5

당신은 100 % width 및 height에서 fixed 위치 요소를 원하는 것 또는 이미지를 클릭하면 해당 이미지를 볼 수 있습니다. z-index을 설정 한 다음 다른 모든 요소를 ​​설정하여 필요한 경우 앞에 오도록하십시오.

$('#id').css({ 
    position: 'fixed', 
    top: 0, 
    left: 0, 
    width: 100% 
    height: 100%, 
    zIndex: 701 
});