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/

Answer 2

您错过了$标志：

var overlay = $('#overlay');

Working demo

如果您检查JavaScript控制台，则会看到指向此行代码的错误。

Answer 3

HTML有一个小错误，＆＃34; overlay＆＃34;应该关闭：

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

这适用于上面的小提琴

覆盖透明div，点击时消失

3 个答案: