我在我的网页中添加了灯箱功能。一切正常。所以当我点击图片时它会变大......
我的问题是没有关闭按钮。我如何让它关闭而不必单击返回。
这是我的灯箱代码
window.onload = setupLightbox;
var lightboxOverlay;
var lightboxImage;
function setupLightbox() {
for (i in document.links) {
if(document.links[i].rel == "lightbox"){
document.links[i].onclick = showLightbox;
}
}
}
function showLightbox() {
lightboxOverlay = document.createElement("div");
lightboxImage = document.createElement("img");
lightboxOverlay.style.position = "fixed";
lightboxOverlay.style.top = lightboxOverlay.style.left ="0";
lightboxOverlay.style.width = lightboxOverlay.style.height ="100%";
lightboxOverlay.style.background = "#000";
lightboxOverlay.style.opacity = "0.5";
lightboxOverlay.style.filter = "alpha(opacity = 50)";
document.body.appendChild(lightboxOve…
lightboxImage.onload = showImage;
lightboxOverlay.onclick = closeLightbox;
lightboxImage.src = this.href;
return false;
}
function showImage(){
lightboxImage.style.position = "fixed";
lightboxImage.style.top = lightboxImage.style.left = "50%";
lightboxImage.style.marginLeft = -lightboxImage.width/2 + "px";
lightboxImage.style.marginTop = -lightboxImage.width/2 + "px";
lightboxImage.style.border = "10px solid #fff";
document.body.appendChild(lightboxIma…
}
function closeLightbox(){
lightboxImage.style.opacity = lightboxOverlay.style.opacity = "0";
setTimeout( function() {
lightboxImage.parentNode.removeChild…
lightboxOverlay.parentNode.removeChi…
}, 1);
}