Javascript 一个分区中有多个灯箱

如何在另一个div上创建2个灯箱？我为lightbox创建了一个示例代码，但问题是。。。我不知道如何创建第二个灯箱，将出现在同一页通过点击链接

以下是css：

#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: #fff;
    z-index:1002;
    overflow:visible;

剧本：

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';
}

然后，正文内容：

    <a href="#" onclick="lightbox_open();">Open lightbox</a>
<div id="light"> lightbox1 <br>click to open lightbox2<br>
<a href=#>open</a>
</div>
<div id="fade" onClick="lightbox_close();"></div> 

lightbox1
单击打开lightbox2

…还是它在另一个div上？？？算了吧，代码还是不平衡的。您丢失了一个结束div标记。另外，为什么不使用jQuery呢？让生活变得容易多了。我已经编辑过了，但仍然不在小提琴上工作。它现在正在我的工作。。。而且不知道如何使用query:/jQuery非常容易使用，事实上，它的工作就是让JS变得“更容易”（还有许多其他的交叉兼容性优势等等）。在页面上包含jQuery js文件引用，然后开始使用jQuery语法。