javascript - 尝试实现 javascript 弹出窗口

Question

我试图在我的网页上获取一个 javascript 弹出窗口，但它不起作用。我已经在 jsfiddle 中全部写出来了 - http://jsfiddle.net/68vGZ/

代码在这里:

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";
    };
}

按钮显示且文本隐藏，但我无法弄清楚为什么它们不会触发...感谢您的帮助!

Answer 1

三个问题:

首先，这是无效的:

window.onload - function () {
              ^

您的 - 符号需要更改为 =:

window.onload = function () {

其次，您有多个具有相同 id 属性的元素 - 这是无效的 HTML，您的 JavaScript 只会检测第一个匹配的元素。您应该将这些更改为 class 属性并使用 getElementsByClassName 而不是 getElementById。

第三，您需要告诉 JSFiddle 将您的 JavaScript 放在文档 body 中。

Fixed JSFiddle demo .