使用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