我正在使用bootstrap 3和jQuery。我现在在我的页面上有一个div,它是500 x 400,它位于bootstrap行和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;
}
答案 0 :(得分:29)
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
答案 1 :(得分:3)
<强> JQuery的强>
$('#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有一点误。将.
更改为#
。