CODEWITHSUNDEEP
jqueryfullscreen
user198729
user198729

Reputation: 63686

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

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

Is there an easy way to do it?

Upvotes: 18

Views: 45482

Answers (5)

thambaru
thambaru

Reputation: 11

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>

Upvotes: 1

bulltorious
bulltorious

Reputation: 7897

Full screen ajax loader, with some opacity.

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>

Upvotes: 3

jay
jay

Reputation: 10325

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

Upvotes: 31

Corey
Corey

Reputation: 1542

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.

Upvotes: 0

effkay
effkay

Reputation: 854

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

Upvotes: 1

Related Questions