使用HTML CSS和JavaScript创建弹出框
[英]Creating popup boxes using html css and javascript
问题描述
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. 另外，在此示例中，我仅包含了两个链接。
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;
}
2 个解决方案
解决方案1
0 已采纳 2014-11-12 14:16:14
Replace <body onLoad="xpopup()"; "ypopup()";> 替换<body onLoad="xpopup()"; "ypopup()";> <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";
};
解决方案2
0 2014-11-12 14:23:15
I'm seeing two issues -- 我看到两个问题-
The first is already answered by chipChocolate.py: 第一已经由chipChocolate.py回答：
Replace
<body onLoad="xpopup()"; "ypopup()";><body onLoad="xpopup()"; "ypopup()";><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 popup1 but you've named your variable popup . 您正在引用popup1但已将变量popup命名。 If you open up the javascript console you'll probably see that's throwing an error. 如果打开JavaScript控制台，您可能会看到抛出错误。 Rename the variable popup1 and this should work. 重命名变量popup1 ，这应该起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.