如何使用 jQuery 使 div 全屏显示并位于所有其他元素之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2217007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a div fullscreen and atop of all other elements with jQuery?
提问by user198729
<div style="background-color:grey">
</div>
Is there an easy way to do it?
有没有简单的方法来做到这一点？
回答by jay
Define a style overlayor something like so:
定义一个样式overlay或类似的东西：
<style>
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
}
</style>
Then you can add the new class like this using jQuery:
然后你可以使用jQuery添加这样的新类：
$('#myDiv').addClass('overlay');
If you want to add with a click event you would do something like this:
如果你想添加一个点击事件，你可以这样做：
$('a').click(function(){
$('#myDiv').addClass('overlay');
}
Or, you could add display:noneto the .overlay class so it's hidden on page load, then have your jQuery clickfunction show it like this:
或者，您可以添加display:none到 .overlay 类，使其在页面加载时隐藏，然后让您的 jQueryclick函数显示如下：
$('a').click(function(){
$('.overlay').show('slow');
}
回答by bulltorious
Full screen ajax loader, with some opacity.
全屏ajax加载器，有一些不透明度。
using
使用
$('#mydiv').show();
$('#mydiv').hide();
to toggle it.
切换它。
#mydiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
<div id="mydiv">
<img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>
回答by effkay
While doing so, you want to disable the user/input?
这样做时，您想禁用用户/输入吗？
Check this: http://malsup.com/jquery/block/
检查这个：http: //malsup.com/jquery/block/
Blocking elements: http://malsup.com/jquery/block/#element
阻塞元素：http: //malsup.com/jquery/block/#element
Blocking whole page: http://malsup.com/jquery/block/#page
阻止整个页面：http: //malsup.com/jquery/block/#page
Rgds
Rgds
回答by Corey
To make it fullscreen, set these styles:
要使其全屏，请设置以下样式：
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
To put it on top, set the z-indexvalue to something higher than the rest of the elements on the page.
要将其放在最上面，请将z-index值设置为高于页面上其余元素的值。
z-index: 99;
You can set all these with a stylesheet, then just use jQuery to show/hide the div.
您可以使用样式表设置所有这些，然后只需使用 jQuery 来显示/隐藏 div。
