使用HTML CSS和JavaScript创建弹出框

Question

基本上，我试图创建单击不同链接时出现的多个弹出框。 由于某些原因，仅当单击第一个链接时才会显示一个弹出框。 单击其余的链接时，什么也没有发生。 任何帮助表示赞赏，谢谢。 另外，在此示例中，我仅包含了两个链接。

JavaScript代码：

function xpopup() {
        document.getElementById("x").onclick= function(){
            var overlay = document.getElementById("overLay");
            var popup = document.getElementById("xPopup");
            overlay.style.display = "block";
            popup.style.display = "block";
        }
    }

    function ypopup() {
        document.getElementById("y").onclick= function(){
            var overlay = document.getElementById("overLay");
            var popup = document.getElementById("yPopup");
            overlay.style.display = "block";
            popup1.style.display = "block";
        }
    }
    </script>

HTML代码：

 <body onLoad="xpopup()"; "ypopup()";>
 <div id="overLay"></div>

<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>

<a href="#" class="listAttractions" id="x">Link 1</a><br>
<a href="#" class="listAttractions" id="y">Link 2</a><br>

CSS代码：

.popupBox{
display:none;
position: fixed;
width: 30%;
height: 40%;
margin-left: 16.5%; 
margin-top: 4.5%;
background-color: white;
border: 2px solid black;
border-radius: 10px;
z-index: 10;
}

#overLay{
display:none;
position: fixed;
width: 100%;
height: 100%;
background-color: #707070;
opacity: 0.7; 
z-index: 9;
left: 0;
top: 0;
}

Answer 1

替换<body onLoad="xpopup()"; "ypopup()";> <body onLoad="xpopup()"; "ypopup()";>与<body onLoad="xpopup(); ypopup();">并在您的JavaScript代码中有一个错字。

function ypopup() {
    document.getElementById("y").onclick= function(){
        var overlay = document.getElementById("overLay");
        var popup = document.getElementById("yPopup");
        overlay.style.display = "block";
        popup1.style.display = "block";    // Here the popup1 is undefined change it to popup.style.....
    }
}

编辑：->

如果您单击灰色部分，我已经更改了代码以隐藏弹出窗口。

小提琴

HTML：

<body>
    <div id="overLay"></div>
    <div class="popupBox" id="xPopup"></div>
    <div class="popupBox" id="yPopup"></div>
<a href="#" class="listAttractions" id="x">Link 1</a>
    <br />
<a href="#" class="listAttractions" id="y">Link 2</a>
    <br />
</body>

JavaScript：

var overlay = document.getElementById("overLay");
var xpopup = document.getElementById("xPopup");
var ypopup = document.getElementById("yPopup");

document.getElementById("x").onclick = function () {
    overlay.style.display = "block";
    xpopup.style.display = "block";
};
document.getElementById("y").onclick = function () {
    overlay.style.display = "block";
    ypopup.style.display = "block";
};
overlay.onclick = function () {
    overlay.style.display = "none";
    xpopup.style.display = "none";
    ypopup.style.display = "none";
};

Answer 2

我看到两个问题-

第一已经由chipChocolate.py回答：

替换<body onLoad="xpopup()"; "ypopup()";> <body onLoad="xpopup()"; "ypopup()";>和<body onLoad="xpopup(); ypopup();"> 。

第二个（也许这只是一个错字？）是您有：

function ypopup() {
  document.getElementById("y").onclick= function()
    var overlay = document.getElementById("overLay");
    var popup = document.getElementById("yPopup");
    overlay.style.display = "block";
    popup1.style.display = "block";
  }
}

您正在引用popup1但已将变量popup命名。 如果打开JavaScript控制台，您可能会看到抛出错误。 重命名变量popup1 ，这应该起作用。

使用HTML CSS和JavaScript创建弹出框

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-11-12 14:16:14

编辑：->

小提琴

HTML：

JavaScript：

解决方案2
0 2014-11-12 14:23:15

使用HTML CSS和JavaScript创建弹出框

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-11-12 14:16:14

编辑：->

小提琴

HTML：

JavaScript：

解决方案2 0 2014-11-12 14:23:15

解决方案1
0 已采纳 2014-11-12 14:16:14

解决方案2
0 2014-11-12 14:23:15