Trying to implement javascript popup

Question

I'm trying to get a javascript popup on my webpage and it's not working. I've written it all out in jsfiddle - http://jsfiddle.net/68vGZ/

and the code is here:

HTML
<div id="header-links">
    <button id="aboutinfo">About</button>
    <div id="overlay"></div>
    <div id="popup">
        <p>About Info Here</p>
        <button id="closeaboutinfo">Close</button>
    </div>
    <button id="contactinfo">Contact</button>
    <div id="overlay"></div>
    <div id="popup">
        <p>Contact with this email address</p>
        <button id="closecontactinfo">Close</button>
    </div>
</div>


CSS
#overlay {
    display:none;
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    z-index:99999;
}
#popup {
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    width:300px;
    height:150px;
    margin-top:-75px;
    margin-left:-150px;
    background:#FFFFFF;
    border:2px solid #000;
    z-index:100000;
}


JavaScript
window.onload - function () {
    document.getElementById("aboutinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    };

    document.getElementById("closeaboutinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";
    };

    document.getElementById("contactinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "block";
        popup.style.display = "block";
    };

    document.getElementById("closecontactinfo").onclick = function () {
        var overlay = document.getElementById("overlay");
        var popup = document.getElementById("popup");
        overlay.style.display = "none";
        popup.style.display = "none";
    };
}

The buttons show and the text is hidden, but i just can't work out why they won't trigger... Thanks for your help!

The error is quite trivial. It should be window.onload = function () ..., not with the minus sign. — MaxArt
– MaxArt, Commented Aug 5, 2014 at 11:21
Only the overlay and popup though as far as i can see. I want these to stay the same and the content in them will change — user3910071
– user3910071, Commented Aug 5, 2014 at 11:23

James Donnelly · Accepted Answer · 2014-08-05 11:21:08Z

2

Three problems:

Firstly, this isn't valid:

window.onload - function () {
              ^

Your - symbol needs to be changed to a =:

window.onload = function () {

Secondly you have multiple elements with the same id attribute - this is invalid HTML and your JavaScript will only detect the first matched element. You should change these to class attributes and use getElementsByClassName instead of getElementById.

Thirdly, you need to tell JSFiddle to place your JavaScript in the document body.

Fixed JSFiddle demo.

answered Aug 5, 2014 at 11:21

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3910071 Over a year ago

Thanks for your help but i'm really confused now. I just put this into Brackets and it won't work... The text isn't hidden by default, it's all inline. I linked a separate .js file in the <head> using <script src="js/info.js"></script> and it won't work...

user3910071 Over a year ago

What do you mean? I've put the CSS into the main (and only) CSS file for the website, and have since saved it. Still no luck...?

James Donnelly Over a year ago

@user3910071 if you've updated your id attributes to class attributes you'll need to use the . class selector rather than the # id selector.

user3910071 Over a year ago

Yeah i've done that. Am i right in thinking i should update id to class on "overlay" and "popup"? As they were sharing?

James Donnelly Over a year ago

Ah sorry I didn't respond, I had to leave to go to a house viewing. Glad you got it working. :)

glycerin · Accepted Answer · 2014-08-05 11:35:46Z

0

I would look into using Bootstrap. They make it easy for you to create nice looking popups with rich functionality right out of the box. Here is a link where you can get bootstrap http://getbootstrap.com

They have much more to offer besides nice popups (modals). Definitely worth checking out even if this answer doesn't help you out.

answered Aug 5, 2014 at 11:35

glycerin

915 bronze badges

Collectives™ on Stack Overflow

Trying to implement javascript popup

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related