覆盖透明div,点击时消失

Question

我希望在HTML页面上有一个透明的div,其中有一个图形,上面有用户指示如何使用该页面.当单击或按下页面上的任何位置时,div将隐藏/消失.

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

它链接到我的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/