2013-05-30 3 views
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); 

} 
+0

либо добавьте кнопку закрытия, либо установите событие закрытия на накладной прокладке, которое в основном представляет собой наложенный суперпозиционированный div в фоновом режиме (прозрачный или полупрозрачный). Другим способом может быть нажатие клавиши перехода? Надеюсь, я правильно понял вопрос – varun

ответ

0

Проверьте Lightbox должно иметь CSS-файл с ней и папкой с изображениями тоже. Укажите файл css в разделе заголовка, чтобы он мог найти изображение.

Смежные вопросы