Question

我没有运气就试过这种方法：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;
}

Answer 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()会为显示属性设置动画，因此您必须启动fadeIn() display: none;定位的任何元素

https://jsfiddle.net/hxq4nd6g/

Answer 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中进行测试。

停电整个页面并突出显示div元素

2 个答案: