0
我已经为我的网页添加了灯箱功能。一切正常。所以当我点击一个图像时它会变大......Java脚本和灯箱关闭按钮
我的问题是没有关闭按钮。我如何在不必点击返回的情况下关闭它。
这里是我的灯箱
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);
}
要么添加一个关闭按钮，要么在叠加垫片上放置一个关闭事件，这基本上是叠加在背景（透明或半透明）的叠加div。其他方式可能是一个逃生键？我希望我能正确理解这个问题 – varun