How to make a div fullscreen and atop of all other elements with jQuery?

Question

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

Is there an easy way to do it?

Answer 1

While doing so, you want to disable the user/input?

Check this: http://malsup.com/jquery/block/

Blocking elements: http://malsup.com/jquery/block/#element

Blocking whole page: http://malsup.com/jquery/block/#page

Rgds

Answer 2

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-index value to something higher than the rest of the elements on the page.

z-index: 99;

You can set all these with a stylesheet, then just use jQuery to show/hide the div.

Answer 3

Define a style overlay or something like so:

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

$('#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:none to the .overlay class so it's hidden on page load, then have your jQuery click function show it like this:

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