使div'全屏'onClick？

Question

我有一个div，我想要全屏（按窗口大小的100％宽度/高度）onClick按钮。 我将如何使用JavaScript/jQuery去解决这个问题？

Answer 1

DEMO

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

Answer 2

$('div.yourdivclass').click(function(){ 
    $(this).css('height','100%').css('width','100%'); 
}) 

Answer 3

你试过了什么？什么没有用？ 看看是：

http://jsfiddle.net/6BP9t/1/

$('#box').on('click',function(e){ 
    $(this).css({ 
     width:"100%", 
     height:"100%" 
    }); 
}); 

Answer 4

我这样做：

$('#idOfDiv').click(function() { 
    $(this).css({position:'fixed', height: '100%', width: '100%'}); 
});​ 

jsfiffle：http://jsfiddle.net/P6tgH/

Answer 5

$('div').click(function(){ 
    var win = $(window), 
     h = win.height(), 
     w = win.width(); 
    $(this).css({ height: h, width: w }); 
}); 

http://jsfiddle.net/TQA4z/1/

Answer 6

这是一个替代的答案标记为正确。此外，它给了他他要求关闭div的内容。

使用toggle类比在你的jQuery中使用css容易得多。尽你所能地将CSS与JavaScript分开。

出于某种原因，我的HTTPS正在加载JavaScript的加载该jsfiddle页面。我点击了Chrome地址栏中的盾牌图标，然后选择运行脚本。

Toggle Class Demo

喜欢的东西

$('#buttonID').click(function() { 
$("div > div").toggleClass("Class you want to add"); 
});