纯 Javascript Lightbox 或 Image Popup Modal 的完整实现可以在我的答案中找到https://stackoverflow.com/a/67169851/8210884 https://stackoverflow.com/a/67169851/8210884.
上面链接中提到的这个答案允许处理隐藏灯箱的问题ESC键以及使用 Lightbox 中的图像进行导航Left and Right箭头键。
以下是该答案中的代码片段，它将帮助我们解决这两个问题。
隐藏灯箱ESC key :
if(event.keyCode==27){ // If ESC key is pressed
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
document.getElementById("lightbox-container").classList.remove("showcontainer");
}
}
在 Lightbox 中浏览网页上的所有图像左、右箭头键 :
else if(event.keyCode==37) { // Left arrow key
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
// first get the URL of image displayed in the LIGHT BOX
var currimgsrc = document.getElementById("lightbox-cont-img").getAttribute("src");
// now match the sequence number in the array
var serialofarray = 0;
for(k=0;k<allimgurlarray.length;k++){
if(currimgsrc == allimgurlarray[k][2]){
serialofarray = allimgurlarray[k][0];
}
}
// with LEFT arrow, we are supposed to reduce the sequence and then use its ATTR SRC to LIGHT BOX
if(serialofarray<=0){
serialofarray = allimgurlarray.length - 1;
}
else {
serialofarray = serialofarray - 1;
}
console.log("Left Arrow : "+serialofarray);
document.getElementById("lightbox-cont-img").setAttribute("src", allimgurlarray[serialofarray][2]);
}
}
else if(event.keyCode==39) { // Right Arrow Key
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){
// first get the URL of image displayed in the LIGHT BOX
var currimgsrc = document.getElementById("lightbox-cont-img").getAttribute("src");
// now match the sequence number in the array
var serialofarray = 0;
for(l=0;l<allimgurlarray.length;l++){
if(currimgsrc == allimgurlarray[l][2]){
serialofarray = allimgurlarray[l][0];
}
}
// with RIGHT arrow, we are supposed to increase the sequence and then use its ATTR SRC to LIGHT BOX
if(serialofarray>=allimgurlarray.length-1){
serialofarray = 0;
}
else {
serialofarray = serialofarray + 1;
}
console.log("Right Arrow : "+serialofarray);
document.getElementById("lightbox-cont-img").setAttribute("src", allimgurlarray[serialofarray][2]);
}
}
这些有条件的情况涉及按键事件被解决在document.onkeydown = function(event).
下面的这段代码对于禁用默认行为IMG 标签上的按键事件以及将网页上的所有图像堆叠起来在数组中，以允许使用向左和向右箭头键在 Lightbox 中导航。
// Select all A tags with IMG child nodes
var atagswithimgtag = document.querySelectorAll("a[href]");
// then prevent the default behaviour of A tags by preventing of opening new page by HREF
// as well as collect all the HREF of A tags with images to enable RIGHT and LEFT arrow key
var allimgurlarray = [];
for(i=0;i<atagswithimgtag.length;i++){
var childAIMGtag = atagswithimgtag[i].childNodes;
if (childAIMGtag[0].nodeType != Node.TEXT_NODE) // or if (el[i].nodeType != 3)
{
// this seems too be a A tag with IMG tag as Childnode
// first we need to prevent the default behaviour of opening the IMG in New Tab
atagswithimgtag[i].addEventListener("click", function(event){
event.preventDefault();
});
// second is when we need to fill image URL aray with A HREF
var listofnodes = atagswithimgtag[i];
allimgurlarray[i] = [];
allimgurlarray[i][0] = i;
allimgurlarray[i][1] = " Image URL is ";//listofnodes.getAttributeNode("title").value;
allimgurlarray[i][2] = listofnodes.getAttributeNode("href").value;
}
console.log(childAIMGtag[0].innerHTML);
}
