我正在为网站制作画廊，但模态对我不起作用。我尝试了一切。 如果可能的话，请添加两个导航箭头，就像在 Messenger 或 Facebook 上一样。
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galéria</title>
<link rel="shortcut icon" href="pics/icon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topnav" id="myTopnav"
<a href="index.html">Home</a>
<a href="galery.html">Galéria</a>
<a href="info.html">Információk</a>
<a href="javascript:void(0);">
<i></i>
</a>
<div id="kepek">
<img class="galleryimg" src="pics/gallery/kep (1).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (2).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (3).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (4).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (5).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (6).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (7).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (8).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (9).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (10).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (11).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (12).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (13).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (14).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (15).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (16).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (17).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (18).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (19).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (20).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (21).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (22).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (23).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (24).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (25).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (26).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (27).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (28).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (29).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (31).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (32).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (33).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (34).jpg" alt="">
<img class="galleryimg" src="pics/gallery/kep (35).jpg" alt="">
</div>
<script src="app.js"></script>
#kepek {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.galleryimg {
height: 26vh;
width: 100%;
object-fit: cover;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s;
}
.galleryimg:hover {
transform: scale(1.05);
}
这是针对多种模式的可靠 js 解决方案：https://fancyapps.com/fancybox/
也许它会给您一些如何在网页上构建自己的模式的线索