一个div中有多个灯箱

Question

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

这里是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>