I am looking to create a dynamic user experience where clicking on an image triggers a <div> overlay that darkens the background. However, instead of simply appearing over the current screen, I want the overlay to push everything else beneath it.
Before Overlay: https://i.sstatic.net/77Obz.jpg
After Applying Overlay (notice how it pushes other elements down): https://i.sstatic.net/lxTER.png
Additionally, I would like users to be able to close the overlay by clicking outside of it on the darkened background. Is this possible?
HTML:
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="cf show-grid">
<div class="row">
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<!-- End Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>
<!-- End Normal Page Content -->
<div class="grid-2 dashboardIcons">
<h3 class="fontAmaticH1">Stress & Anxiety</h3>
<a href="stess-anxiety.php"><img src="images/stress.jpg"></a>
</div>
<div class="grid-2 dashboardIcons">
<h3 class="fontAmaticH1">Mindfulness</h3>
<a class="cursor" onmousedown="toggleOverlay()"><img src="images/mindfulness.jpg"></a>
</div>
<div class="grid-2 dashboardIcons">
<h3 class="fontAmaticH1">Exam Preperation</h3>
<a href="exam-prep.php"><img src="images/examPrep.jpg"></a>
</div>
</div>
</div>
</section>
</div>
</section>
CSS:
/*Creating overlays for modules */
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
JS:
/* Script for page overlays within module pages */
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
Just a heads up, I am utilizing Foldy Grids to ensure responsiveness in my div layout.