覆盖一个透明的 div，点击后消失答案

【问题标题】：Overlaying a transparent div, which when clicked disappears覆盖一个透明的 div，点击后消失
【发布时间】：2016-01-27 06:30:57
【问题描述】：

我希望在 HTML 页面上有一个透明的 div，上面有一个图形，上面有用户如何使用该页面的说明。当点击或按下页面上的任意位置时，div 将隐藏/消失。

我有 JavaScript 代码，是从 StackOverflow 上的另一篇文章中获取的，但我似乎无法让它工作。

它链接到我的 HTML 页面和 CSS，并且 div 出现了，但单击时它并没有消失。

我该怎么做？

HTML代码如下：

<div id="overlay">
    <div id="home_text">
        <!-- Your image -->
    </div>
</div>

CSS：

#overlay {
    background: rgba(0, 0, 0, .4);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

#home_text {
    background: red;
    height: 300px;
    margin: 20px auto 0;
    width: 300px;
}

JavaScript：

(function () {
    var overlay = ('#overlay');
    overlay.on('click', function (e) {
        overlay
            .hide()
            .off();
    });
});

【问题讨论】：

你使用的是 jQuery 而不是纯 javascript

标签： javascript css html

【解决方案1】：

你在("#overlay")之前漏掉了“$”字符：

$(document).ready(function() {
    var overlay = $('#overlay');
    overlay.on('click', function (e) {
        overlay
            .hide()
            .off();
    });
});

演示：

http://jsfiddle.net/ks38e/6/

【讨论】：

感谢您指出我已经通过并修改了它以匹配上面的代码，但仍然无法正常工作。还有什么可能吗？
你用过我提供的小提琴吗？你想要这样的东西还是不同的东西？ @user3437161
是的，你提供的小提琴很棒，这正是我需要它工作的方式，我将代码完全从小提琴复制到我的 HTML、CSS 和 Javascript 中，但单击时 div 仍然不会消失.
我猜你的 jquery 有问题。你使用的是哪个版本？ @user3437161
我的javascript还有另一部分，这会影响它吗？函数 readmore(){ var btn = document.getElementById('button'); var spoiler = document.getElementById('spoiler'); if(spoiler.style.display=='none') { 剧透.style.display = ''; btn.innerHTML = "阅读少..."; } else { 剧透.style.display = 'none'; btn.innerHTML = "阅读更多..."; } }

【解决方案2】：

您缺少$ 符号：

var overlay = $('#overlay');

Working demo

如果你检查你的 JavaScript 控制台，你会看到一个指向这行代码的错误。

【讨论】：

【解决方案3】：

HTML 有一个小错误，应该关闭“覆盖”：

<div id="overlay"></div>
<div id="home_text">
    <!-- Your image -->
</div>

这对上面的小提琴有效

【讨论】：