I attempted to implement a solution I found on stackoverflow without success. The issue is that the blackout feature does not seem to activate - nothing happens.
Within my JavaScript code (all enclosed in the $(document).ready(function () tag), it appears like this:
// Display MicroClean Details window
$(function () {
$("#MicroCleanClick").click(function () {
$("#GraphBox").show();
$(this).css("z-index","99999");
$("#overlay").fadeIn(300);
loadGraph();
return false;
});
});
// Remove blackout
$("#overlay").click(function (e) {
$("#overlay").fadeOut(300, function () {
$(".expose").css("z-index", "1");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="MicroCleanClick" href="#" class="button">Show Data</a>
<div class="expose" id="GraphBox">
<p class="checkbox"><input type="checkbox" name="temperature" value="temp"> Temperature <input type="checkbox" name="relHumidity" value="relhum"> Rel. Humidity</p>
<p class="datepicker">From: <input type="text" id="fromDate"> To: <input type="text" id="toDate" ></p>
<canvas id="myChart" width=800 height="450"></canvas>
<div id="legendDiv"></div><br>
</div>UPDATE:
Here is the CSS styling for #overlay and .expose:
.expose {
position:relative;
}
#overlay {
background:rgba(0,0,0,0.3);
display:none;
width:100%; height:100%;
position:absolute;
top:0;
left:0;
z-index:99998;
}