javascript - 覆盖一个透明的 div，点击后消失

Question

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

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

它链接到我的 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();
    });
});

Answer 1

你错过了 ("#overlay") 之前的“$”字符:

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

演示:

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