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

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