Question

我在我的网页上添加了一个灯箱功能。一切正常。所以当我点击一张图片时，它变大了......

我的问题是没有关闭按钮。如何让它关闭而不必点击回来。

这是我的灯箱代码

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);

}

Answer 1

检查灯箱应该有一个带有它的css文件和一个图像文件夹。在标题部分指定css文件，以便它可以找到图像。

Javascript和灯箱关闭按钮

1 个答案: