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

Answer 2

我会研究使用Bootstrap。它们使您可以轻松创建具有丰富功能的漂亮外观弹出窗口。这是一个可以获得bootstrap http://getbootstrap.com

的链接

除了漂亮的弹出窗口（模态）之外，它们还有更多功能。即使这个答案没有帮助你，也绝对值得一试。

试图实现javascript弹出窗口

2 个答案: