[英]Expand a div to full screen
我正在使用引导程序 3 和 jQuery。 我的页面上现在有一个 500 x 400 的 div,它位于引导行和 col div 内。 例如:
<div class="row">
<div class="col-lg-12">
<div id="myDiv"></div>
</div>
</div>
我想使用 jQuery 告诉这个 div 全屏显示。 当我点击我的按钮使其全屏显示时,它似乎被锁定在引导行内,并在父 div 内达到 100% x 100%。 无论如何要告诉#myDiv 从它所在的父项中弹出并全屏显示。
我的CSS:
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
看到这个演示小提琴
CSS
#myDiv.fullscreen{
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
#myDiv{background:#cc0000; width:500px; height:400px;}
HTML
<div class="row">
<div class="col-lg-12">
<div id="myDiv">
my div
<button>Full Screen</button>
</div>
</div>
JS:
$('button').click(function(e){
$('#myDiv').toggleClass('fullscreen');
});
诀窍在于设置position:fixed
,通过切换.fullscreen
类。 可以这么说,这会将它移到正常的 dom 树之外,并相对于窗口调整其大小/位置。
HTH, -Ted
查询
$('#button').click(function(){
$('#myDiv').css({"top":"0","bottom":"0","left":"0","right":"0"});
});
CSS
#myDiv{
z-index: 9999;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
你的css有一点错误。 更改.
到#
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.