Reputation: 2749
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;
}
Upvotes: 0
Views: 315
Reputation: 90
Use z-index
to add overlay effect use this css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: #000;
z-index:99999
}
Upvotes: 0