使用html css和javascript创建弹出框 [英] Creating popup boxes using html css and javascript
本文介绍了使用html css和javascript创建弹出框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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;
函数ypopup（）{
document.getElementById（y）。onclick = function（）{
var overlay = document .getElementById（ 叠加）;
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 =popupBoxid =xPopup>< / div>
< div class =popupBoxid =yPopup>< / div>
< a href =＃class =listAttractionsid =x>连结1< / a>< br>
< a href =＃class =listAttractionsid =y>连结2< / a>< br>
CSS code：
.popupBox {
display：none;
位置：固定;
宽度：30％;
身高：40％;
保证金余额：16.5％;
保证金率：4.5％;
背景颜色：白色;
border：2px纯黑色;
border-radius：10px;
z-index：10;
}
#overLay {
display：none;
位置：固定;
宽度：100％;
身高：100％;
背景颜色：＃707070;
不透明度：0.7;
z-index：9;
剩下：0;
top：0;
解决方案
替换< body onLoad =xpopup（）; ypopup（）;> with < body onLoad =xpopup（）; ypopup（）;> 代码你有一个错字。
函数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.style .....
}
}
编辑： - >
如果您点击灰色部分，我已经更改了代码以隐藏弹出窗口。
HTML：
< body>
< div id =overLay>< / div>
< div class =popupBoxid =xPopup>< / div>
< div class =popupBoxid =yPopup>< / div>
< a href =＃class =listAttractionsid =x> Link 1< / a>
< br />
< a href =＃class =listAttractionsid =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;
};
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:
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:
<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:
.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;
}
解决方案
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();"> and in your JavaScript code you have a typo.
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:
<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";
};
这篇关于使用html css和javascript创建弹出框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
