使用 html css 和 javascript 创建弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26889028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating popup boxes using html css and javascript
提问by Zaq Mughal
basically i'm trying to create multiple popup boxes that appear when different links are clicked. For some reason, a popup box only appears when the first link is clicked. When the rest of the links are clicked, nothing happens. Any help is appreciated, thanks. Also, I've only included 2 of the links in this example.
基本上我试图创建多个弹出框，当点击不同的链接时会出现这些弹出框。出于某种原因，只有在单击第一个链接时才会出现弹出框。单击其余链接时，什么也没有发生。任何帮助表示赞赏，谢谢。另外，我在这个例子中只包含了 2 个链接。
javascript code:
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 code:
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 code:
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;
}
采纳答案by Weafs.py
Replace <body onLoad="xpopup()"; "ypopup()";>with <body onLoad="xpopup(); ypopup();">and in your JavaScript code you have a typo.
替换<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.....
}
}
Edit :-->
编辑：-->
I've changed your code to hide the popup, if you click on the greyed out section.
如果您单击灰色部分，我已更改您的代码以隐藏弹出窗口。
Fiddle
小提琴
HTML:
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:
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";
};
回答by SataGNUk
I'm seeing two issues --
我看到两个问题——
The first is already answered by chipChocolate.py:
第一个已经由chipChocolate.py回答：
Replace
<body onLoad="xpopup()"; "ypopup()";>with<body onLoad="xpopup(); ypopup();">.
替换
<body onLoad="xpopup()"; "ypopup()";>为<body onLoad="xpopup(); ypopup();">。
The second (and maybe this is just a typo?) is that you have:
第二个（也许这只是一个错字？）是你有：
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";
}
}
You're referencing popup1but you've named your variable popup. If you open up the javascript console you'll probably see that's throwing an error. Rename the variable popup1and this should work.
您正在引用，popup1但您已将变量命名为popup。如果您打开 javascript 控制台，您可能会看到它在抛出错误。重命名变量popup1，这应该可以工作。
