johnny_s johnny_s - 6 months ago 17
Javascript Question

Full page overlay appears behind

I am trying to create a simple full page overlay with bootstrap.

However the overlay is appearing 'behind' my main content (a blue box in the example).

I'm sure I am missing something very obvious however any help would be appreciated.

I need to overlay to disappear when the page is clicked anywhere, this is working.

I have included my current code and a jsfiddle. You can see that the overlay is behind the blue box, which seems to load first?

HTML

<div class="overlay overlay-data">
<p>click anywhere to close this overlay</p>
</div>

<div class="col-md-4">
<div class="menu-item blue">
<p>MY INFO BOX</p>
</div>
</div>


JS

$(document).ready(function () {
$(".overlay").addClass('overlay-open');
$("section").addClass('blur');
});

$(document).on('click', '.overlay', function () {
$(".overlay").removeClass('overlay-open');
$("section").removeClass('blur');
});


CSS

.blur {
-webkit-filter: blur(2px);
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
}
.overlay p {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 0.5;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.blue {
background: #28ABE3;
}
.menu-item {
padding-top: 45px;
padding-bottom: 45px;
margin-bottom: 45px;
transition: all 0.3s;
border: 5px solid transparent;
}

Answer

Specify the z-index in your css to be greater than your main content.

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
}

JSFiddle

Read more about it at MDN, z-index.