Overlaying a transparent div, which when clicked disappears

Question

I am looking to have a transparent div on an HTML page with a graphic on which it has instructions for the user on how to use the page. When anywhere on the page is clicked or pressed then the div will hide/disappear.

I have JavaScript code which I have taken from another post on Stack Overflow, but I cannot seem to get it working.

It is linked to my HTML page and CSS, and the div is appearing, but it isn't disappearing when clicked.

How can I do this?

HTML code is as below:

<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();
    });
});

You are using jQuery not pure javascript – Zword Apr 03 '14 at 12:14 — Zword, Apr 03 '14 at 12:14

score 5 · Answer 1 · edited Jul 07 '15 at 17:30

5

You have missed the "$" character before ("#overlay"):

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

Demo:

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

edited Jul 07 '15 at 17:30

Peter Mortensen

30,738
21
105
131

answered Apr 03 '14 at 12:15

Neel

11,625
3
43
61

Thanks for pointing that out I have gone through and amended so it matches the above code, but still doesn't work. Anything else it may be? – user3437161 Apr 03 '14 at 12:40
have you gone through the fiddle I provided? you want something like this or something different? @user3437161 – Neel Apr 03 '14 at 12:42
Yes the fiddle you provided is great, that's exactly how I need it to work and I copied the code exactly from the fiddle into my HTML,CSS and Javascript but the div still won't disappear when clicked. – user3437161 Apr 03 '14 at 12:46
I guess some problem with your jquery..which version you are using? @user3437161 – Neel Apr 03 '14 at 12:49
I also have another part to my javascript, would that be affecting it at all? function readmore(){ var btn = document.getElementById('button'); var spoiler = document.getElementById('spoiler'); if(spoiler.style.display=='none') { spoiler.style.display = ''; btn.innerHTML = "Read Less ..."; } else { spoiler.style.display = 'none'; btn.innerHTML = "Read More ..."; } } – user3437161 Apr 03 '14 at 12:54
@user3437161 why you have removed the accepted answer :( – Neel Apr 08 '14 at 10:28

score 3 · Accepted Answer · edited Jul 07 '15 at 17:29

3

You are missing a $ sign:

var overlay = $('#overlay');

Working demo

If you check your JavaScript console, you will see an error pointing to this line of code.

edited Jul 07 '15 at 17:29

Peter Mortensen

30,738
21
105
131

answered Apr 03 '14 at 12:15

Turnip

35,836
15
89
111

score -1 · Answer 3 · answered Nov 16 '15 at 18:44

-1

The HTML has a minor error, the of the "overlay" should be closed:

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

That works on the fiddle above

answered Nov 16 '15 at 18:44

Abeer

1

Overlaying a transparent div, which when clicked disappears

3 Answers3

Linked