尝试实现javascript弹出窗口

我试图在我的网页上弹出一个javascript，但它不起作用。我已经在JSFIDLE中写完了-

代码如下：

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

HTML
关于
关于这里的信息

接近
接触
请与此电子邮件地址联系

接近
CSS
#覆盖层{
显示：无；
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
背景：#000；
不透明度：0.5；
z指数：99999；
}
#弹出窗口{
显示：无；
位置：固定；
左：50%；
最高：50%；
宽度：300px；
高度：150像素；
利润上限：-75px；
左边距：-150px；
背景：#FFFFFF；
边框：2倍实心#000；
z指数：100000；
}
JavaScript
window.onload-函数（）{
document.getElementById（“aboutinfo”）.onclick=function（）{
var overlay=document.getElementById（“overlay”）；
var popup=document.getElementById（“popup”）；
overlay.style.display=“块”；
popup.style.display=“block”；
};
document.getElementById（“closeaboutinfo”）.onclick=function（）{
var overlay=document.getElementById（“overlay”）；
var popup=document.getElementById（“popup”）；
overlay.style.display=“无”；
popup.style.display=“无”；
};
document.getElementById（“contactinfo”）.onclick=function（）{
var overlay=document.getElementById（“overlay”）；
var popup=document.getElementById（“popup”）；
overlay.style.display=“块”；
popup.style.display=“block”；
};
document.getElementById（“closecontactinfo”）.onclick=function（）{
var overlay=document.getElementById（“overlay”）；
var popup=document.getElementById（“popup”）；
overlay.style.display=“无”；
popup.style.display=“无”；
};
}

按钮显示，文本隐藏，但我不明白为什么它们不会触发。。。谢谢你的帮助

三个问题：

首先，这是无效的：

window.onload - function () {
              ^

您的

-

符号需要更改为

=

：

window.onload = function () {

其次，您有多个元素具有相同的

id

属性-这是无效的HTML，您的JavaScript将只检测第一个匹配的元素。您应该将这些属性更改为

class

属性，并使用

getElementsByClassName

而不是

getElementById

第三，您需要告诉JSFIDLE将JavaScript放在文档

正文
中

.
我会考虑使用引导。它们使您可以轻松创建外观美观、功能丰富的即时弹出窗口。这里有一个链接，您可以从中获取引导

除了漂亮的弹出窗口（modals）之外，它们还有更多的功能。即使这个答案对您没有帮助，也绝对值得检查。
您知道您有相同id的元素吗？错误很小。它应该是
window.onload=function（）…
，不带减号。但就我所见，只有覆盖和弹出窗口。我希望这些保持不变，内容也会改变谢谢你的帮助，但我现在真的很困惑。我只是把它放在括号里，它不起作用。。。默认情况下，文本不隐藏，它全部是内联的。我在使用中链接了一个单独的.js文件，但它不起作用…你是什么意思？我已经将CSS放入网站的主（也是唯一）CSS文件中，并保存了它。仍然不走运…？@user3910071如果您已将
id
属性更新为
class
属性，则需要使用
类选择器，而不是
id选择器。是的，我已经这样做了。我认为应该在“覆盖”和“弹出”上更新类的id，对吗？当他们分享时？啊，对不起，我没有回应，我不得不离开去看房子。很高兴你让它工作了。：）