在我的一个元素中，我需要在同一页面上弹出多个 div。这意味着当用户点击一个链接时，一些内容应该在弹出窗口中打开。将有许多这样的链接，它们带有自己的弹出窗口。由于对 javascript 知之甚少，我试图为它编写一个 javascript，但它只适用于一个弹出窗口。当我点击第二个、第三个……链接时，只有第一个弹出窗口打开，而不是打开第二个、第三个……弹出窗口。这是我的代码。请告知对其的修改。
<!DOCTYPE html>
<html >
<head>
<script>
window.document.onkeydown = function (e)
{
if (!e)
{
e = event;
}
if (e.keyCode == 27)
{
lightbox_close();
}
}
function lightbox_open()
{
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close()
{
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<style>
#fade
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light
{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
</head>
<body>
<a href="#" onclick="lightbox_open();">Open 1</a>
<div id="light">div 1</div>
<div id="fade" onClick="lightbox_close();"></div>
<a href="#" onclick="lightbox_open();">Open 2</a>
<div id="light">div 2</div>
<div id="fade" onClick="lightbox_close();"></div>
<a href="#" onclick="lightbox_open();">Open 3</a>
<div id="light">div 3</div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>
最佳答案
这是一种实现您想要的方法。我相信它可以得到改进，但这取决于你。
首先，ID 在整个页面中应该是唯一的。如果您想对元素进行分组，请改为给它们一个共享的类。
经过更改，您的 HTML 将如下所示:
<a href="#" class="lightbox" onclick="lightbox_open(this)">Open 1</a>
<div class="light">div 1</div>
<div class="fade" onClick="lightbox_close()"></div>
<a href="#" class="lightbox" onclick="lightbox_open(this)">Open 2</a>
<div class="light">div 2</div>
<div class="fade" onClick="lightbox_close()"></div>
<a href="#" class="lightbox" onclick="lightbox_open(this)">Open 3</a>
<div class="light">div 3</div>
<div class="fade" onClick="lightbox_close()"></div>
你的 CSS:
html, body {
width: 100%;
height: 100%;
}
.fade {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
.light {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
}
还有你的Javascript:
window.document.onkeydown = function (e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
lightbox_close();
}
}
// Note that the function is receiving the clicked element reference.
function lightbox_open(el) {
window.scrollTo(0,0);
// All the anchors that have a class lightbox.
var anchors = document.querySelectorAll('a.lightbox');
// All the elements with class light.
var light = document.querySelectorAll('.light');
// All the elements with class fade.
var fade = document.querySelectorAll('.fade');
// Iterate over the anchors elements.
for (var i = 0; i < anchors.length; i++) {
// If the anchor matches the clicked one.
if (anchors[i] == el) {
// Look for the light and fade with the same index
// and display them.
light[i].style.display = 'block';
fade[i].style.display = 'block';
}
}
}
function lightbox_close() {
// All the elements with class light or fade.
var els = document.querySelectorAll('.light, .fade');
// Loop through the list.
for (var i = 0; i < els.length; i++) {
// Hide them.
els[i].style.display = 'none';
}
}
关于javascript - 在同一页面中弹出多个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26296700/