在按鈕上點擊div'fullscreen'？

Question

我有一個div，我想要全屏（100％寬度/窗口大小的高度）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 
});