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

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');
}

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

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.

This one worked for me:

.overlay{ 
  background: #4caf5099; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<div class="overlay"></div>
<p>Some text</p>