Geek Answers Handbook

Cross out the entire page and select the div element

I have tried this approach with no luck: https://stackoverflow.com/a/464829/ The problem is that dimming does not work - nothing happens.

My JavaScript code looks like this (all the code is embedded in the $(document).ready(function () ) tag

 // Show 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 code 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; }
+4
source share
2 answers

String $(this).css("z-index","99999"); should be adjusted, so the actual element that should remain on top of the disconnect is present: $("#GraphBox").css("z-index", "99999"); .

In this case, the element at the top is <div id="GraphBox">...</div> .

In addition, all boxes for an anonymous function must be removed for clarity and correctness:

 // Show MicroClean Details window $("#MicroCleanClick").click(function () { $("#GraphBox").show(); $("#GraphBox").css("z-index", "99999"); $("#overlay").fadeIn(300); loadGraph(); return false; }); // Close MicroClean Details Window $("#overlay").click(function (e) { $("#overlay").fadeOut(300, function () { $("#GraphBox").hide(); }); });

Remember to add display:none; in #GraphBox in the CSS file. Otherwise, fadeIn and fadeOut require a trigger.

To close the element at the top of the blackout at the same time as turning it off, add $("#GraphBox").hide(); in:

 $("#overlay").click(function (e) { $("#overlay").fadeOut(300, function () { $("#GraphBox").hide(); }); });

The code is tested in IE and Chrome.

0
source

The first problem that I see is that you do not have a <div id='overlay'> that needs to be styled as follows:

 #overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: black; display: none; z-index: 1; }

Once you add this and configure it, everything should work fine. See this jsfiddle for an example , although it is not entirely clear from the question what data you want to show when the black div is visible.

Also, note that fadeIn() and fadeOut() enliven the display property, so you will need to run any element that targets fadeIn() with display: none;

https://jsfiddle.net/hxq4nd6g/

+4
source

More articles:


All Articles