请您查看THIS LINK,让我知道如何修复我的代码才能正常工作。正如您在演示页面中看到的那样,代码存在一些问题
1:在全屏模式下,图像顶部没有显示班级.hiddenbox
的div
2-尽管设置了边距和填充为0px,页面仍然有空闲空间。水平和垂直滚动条显示在全屏幕上。
你能告诉我如何解决这些问题吗?你能告诉我如何用jquery add / romoveClass或toggleClass来设置这些设置,以便在恢复大小时将所有设置重置为默认值? 的CSS:
html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
.fill{width:100%;height:100%;background-position:center;background-size:cover;}
.hiddenbox{ position:absolute; top:0px; margin:0; padding:0; display:none;}
jquery的:
$(document).keyup(function(e) {
$(".fulesize").click(function(){
$('.well').css( { margin : "0px", padding : "0px" } );
$('.container').css( { margin : "0px", padding : "0px" } );
$(".btn-group").css("display","none");
$(".hiddenbox").css("display","inline");
$("img, .container, .well, .carousel-inner, .carousel, .item, .active").toggleClass("fill");
if (e.keyCode == 27) { $("img, .container, .well, .carousel-inner, .carousel, .item, .active ").removeClass("fill"); } // esc
});
});