Question

<div style="background-color:grey">
</div>

有一种简单的方法吗？

Answer 1

定义样式overlay或类似的内容：

<style>
  .overlay {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
  }
</style>

然后你可以使用jQuery添加这样的新类：

$('#myDiv').addClass('overlay');

如果您想添加点击事件，您可以执行以下操作：

$('a').click(function(){
  $('#myDiv').addClass('overlay');
}

或者，您可以将display:none添加到.overlay类中，以便在页面加载时隐藏它，然后让您的jQuery click函数显示如下：

$('a').click(function(){
  $('.overlay').show('slow');
}

Answer 2

全屏ajax加载程序，具有一些不透明度。

使用

$('#mydiv').show(); 
$('#mydiv').hide();

切换它。

#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>

Answer 3

这样做时，您想要禁用用户/输入吗？

请检查：http://malsup.com/jquery/block/

阻止元素：http://malsup.com/jquery/block/#element

屏蔽整页：http://malsup.com/jquery/block/#page

RGDS

Answer 4

要全屏显示，请设置以下样式：

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

要将其置于顶部，请将z-index值设置为高于页面上其他元素的值。

z-index: 99;

您可以使用样式表设置所有这些，然后使用jQuery显示/隐藏div。

如何使用jQuery制作div全屏和所有其他元素的顶部？

4 个答案: