涂黑整个页面并突出显示 div 元素答案

【问题标题】：Blackout entire page and highlight div element涂黑整个页面并突出显示 div 元素
【发布时间】：2015-11-03 15:15:48
【问题描述】：

我已经尝试过这种方法，但没有任何运气：stackoverflow。问题是没有触发停电 - 没有任何反应。

我的 JavaScript 代码如下所示（所有代码都嵌入在 $(document).ready(function () 标记中）

// 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>

更新：

这是#overlay 和.expose 的CSS 代码：

.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;
}

【问题讨论】：

你的元素在哪里 w/ id overlay？
为什么你的点击事件还是被封装在一个匿名函数中？你说你所有的 JS 都在一个文档就绪函数中，对吧？
使用 intro.js 怎么样

标签： javascript jquery html css

【解决方案1】：

我看到的第一个问题是您没有需要像这样设置样式的<div id='overlay'>：

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

添加并设置样式后，一切都应该正常工作。 See this jsfiddle for an example，尽管在黑色 div 可见时您希望显示哪些数据的问题中并不完全清楚。

另外，请注意 fadeIn() 和 fadeOut() 为 display 属性设置动画，因此您必须使用 display: none; 启动 fadeIn() 定位的任何元素

https://jsfiddle.net/hxq4nd6g/

【讨论】：

这是正确的，我只想补充一点，$(this).css("z-index","99999"); 应该替换为 CSS 类 $(this).addClass('stand-out'); 和 .stand-out 类应该有 position:relative 和 z-index: 99999。这有助于分离 JS 和 CSS 之间的责任，也有助于维护代码，因为以后可以在不更改 javascript 代码的情况下改进/调整样式。
谢谢@AntonBoritskiy - 这绝对是一个进步。
@knolljm 我已经用缺少的 CSS 代码更新了我的问题 - 对不起！我要显示的数据是 ´id="GraphBox"´ 标记中的所有代码。

【解决方案2】：

应该更正$(this).css("z-index","99999"); 行，因此需要保持在停电之上的实际元素存在：$("#GraphBox").css("z-index", "99999");。

在这种情况下，位于顶部的元素是<div id="GraphBox">...</div>。

此外，为了清晰和正确，应删除所有匿名函数包装器：

// 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();
    });
});

记得将display:none; 添加到CSS 文件中的#GraphBox。否则fadeIn 和fadeOut 想要触发。

为确保停电顶部的元素与停电同时关闭，请在以下位置添加$("#GraphBox").hide();：

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

代码在 IE 和 Chrome 中测试。

【讨论】：