Question

我正在尝试编写一个简单的灯箱效果，我可以在同一页面上使用多个图像。（单击一个链接，图像显示在背景中不透明的网站。）我发现了一个不错的小Javascript，但它只适用于页面上的单个图像。我知道我的HTML和CSS，但是我很难找到一个干净，简单的解决方案来解决应该一个简单的功能。（不幸的是，我不是一个Javascript编码器，但我通常可以修改我发现的脚本以满足我的需要......这超出了我的范围！）

这是我的Javascript：

window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}
function lightbox_open(){
    window.scrollTo(0,0);
    document.querySelector('.light').style.display='block';
    document.querySelector('.fade').style.display='block';  
}
function lightbox_close(){
    document.querySelector('.light').style.display='none';
    document.querySelector('.fade').style.display='none';
}

在做了一些研究后，我将原来的getElementById更改为querySelector，因为我需要将其应用于多个图像。但我认为我需要切换回ID，并可能使用编号ID来区分我的图像。但我不确定如何为多个实例使用一个函数。

我的CSS是：

.fade {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.light {
    display: none;
    position: absolute;
    top: 20%;
    left: 50%;
    width: auto;
    height: auto;
    margin-left: -150px;
    margin-top: -100px;                 
    border: 2px solid #FFF;
    background: #FFF;
    z-index:1002;
    overflow:visible;
}

我还没有完善CSS，但我现在并不担心它。我只需要让Javascript首先运行。

我的HTML是这样的：

<a href="#" onclick="lightbox_open();">Photo 1</a>
<div class="light">
<a href="#" onclick="lightbox_close();"><img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close();"></div>

<br />

<a href="#" onclick="lightbox_open();">Photo 2</a>
<div class="light">
<a href="#" onclick="lightbox_close();"><img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close();"></div>

就像我说的，这不是我的Javascript;我正试图根据自己的需要修改它。必须有一个简单的方法来实现这一点，但我不知道足够的Javascript编码来自己完成。我可能需要一个数组或什么？有人可以帮助一个女孩吗？ =）谢谢！

Answer 1

如果您没有其他目的来处理带图像的带编号的ID，则无需将其切换回来，稍加修改，我希望这可以帮助您，演示：http://codepen.io/Carr1005/pen/PzBgom

window.document.onkeydown = function (e)
{
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}

function lightbox_open(index){
    window.scrollTo(0,0);
    document.querySelectorAll('.light')[index].style.display='block';
    document.querySelectorAll('.fade')[index].style.display='block';  
}

function lightbox_close(index){
    document.querySelectorAll('.light')[index].style.display='none';
    document.querySelectorAll('.fade')[index].style.display='none';
}

和html部分

<a href="#" onclick="lightbox_open(0);">Photo 1</a>
<div class="light">
<a href="#" onclick="lightbox_close(0);"><img src="portfolio/print/hwtc/bcard-MUC.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close(0);"></div>

<br />

<a href="#" onclick="lightbox_open(1);">Photo 2</a>
<div class="light">
<a href="#" onclick="lightbox_close(1);"><img src="portfolio/print/hwtc/bcard-CUN.jpg" alt="" /></a>
</div>
<div class="fade" onClick="lightbox_close(1);"></div>

=============================================== =============

有一种说法是使用onClick（）是一种不好的做法，here is why

我认为在某些情况下使用onclick（）并不是那么糟糕，但如果你想走向这个方向，这是另一个例子，也许这是一个研究更多javascript的机会 http://codepen.io/Carr1005/pen/wWxVYE?editors=1111

对同一页面上的多个链接使用Javascript灯箱效果

1 个答案: