javascript - w3schools.com 的模态图像关闭预览不起作用
问题描述
这是 w3 页面的链接https://www.w3schools.com/howto/howto_css_modal_images.asp,所做的所有更改仅在 javascript 中。请注意,w3 页面中的那个不起作用,所以我不得不从这个页面找到一个解决方案,并找到了这个https://jsfiddle.net/snowMonkey/f1zav0ge/,我只从这里获取了 javascript 代码,两者仍然不起作用
继承人的html:
<html>
<head>
<title>Gallery | safsafa</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="gallery.css">
<link rel = "icon" href = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUXLH90QAaWzieHLTW9BxxNvSKIEhAzRzJ1g&usqp=CAU" type = "image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<header>
<h1><span><i class="fa fa-trophy" aria-hidden="true"></i> fsasaf</span></h1>
<ul class="nav_links">
<li><a href="tesAbc.html" >Home</a></li><li><a href="gallery.html">Gallery</a></li><li><a href="#">Showcase</a></li><li><a href="#">About</a></li><li class="nav-seperator">|</li>
</ul>
</header>
<main>
<div class="container">
<h2>//CLICK THESE IMAGES</h2><br>
<img class="myImages" id="myImg" src="image/racoon.jpg" alt="A Racoon" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/hamster.jpg" alt="A Hamster" style="width:100%;max-width:300px">
<img class="myImages"id="myImg" src="image/hedgehog.jpg" alt="A Hedgehog" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/artic_fox.jpg" alt="An Artic Fox" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
</main>
<script>
window.addEventListener('scroll',function(){
var header = document.querySelector("header");
header.classList.toggle('sticky',window.scrollY > 0)
})
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="aos.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImages');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
继承人的CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@500&display=swap');
*{
margin: 0;
padding: 0;
}
body{
background-color: #9dc1fc;
}
header{
position: fixed;
overflow: hidden;
top: 0;
width: 100%;
background-color:;
transition: 0.6s;
z-index:10000000;
}
header span{
font-family:Poppins, sans-serif;
cursor: pointer;
font-size: 125%;
font-weight: 900;
padding-left: 70px;
}
header .nav-seperator{
color: black;
cursor: pointer;
}
header span{
letter-spacing:-2px;
font-size: 115%;
color: blackc;
}
header ul{
font-family:Heebo, sans-serif;
font-weight: 6200;
font-size: 100%;
list-style-type: none;
padding-right: 100px;
}
header li{
display: inline-block;
}
header li a{
margin-right:30px;
text-decoration: none;
color: black;
transition: all 0.3s ease 0s;
}
header li a:hover{
color: #fe6e00;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
header.sticky{
background-color:rgba(0,0,0,0.5)
}
header.sticky ul li a{
color: white;
}
header.sticky span{
color: white;
}
header.sticky .nav-seperator{
color: white;
}
/* MAIN CONTAINER*/
main .container{
margin-top: 100px;
margin-left: 200px;
margin-right: 200px;
text-align:center;
text-transform:uppercase;
color:black;
font-family: Poppins;
font-size: 2rem;
font-weight: 900;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
解决方案
目前,模态窗口上的关闭按钮仍位于导航下方,因此无法单击。为了能够关闭模态框,有必要在 CSS 中进行以下两项更改:
关于样式header
集z-index: 10;
关于样式.modal
集z-index: 11;
他所做的更改是,当模式窗口打开时,它将位于导航上方,并且可以单击“关闭”按钮。
推荐阅读
- r - 如何将 PAD 函数(来自 PADR() 包)用于多个数据帧?
- java - API 测试。如何管理有效负载
- sql-server - 在 SQL Server 中根据时间可用性过滤表记录
- c# - BindingSource.Path 和 BindingSource.Query 之间的区别
- javascript - 我曾尝试添加 gstamount+total 但未添加
- ios - 是否可以部分执行 ARWorldMap 重新定位而不是立即添加所有 ARAnchors?
- java - 设置属性以在 tomcat 启动时禁用 ehcache
- sql - 在 SAS 中编写递归代码的正确方法
- azure - Azure 搜索:关键字标记器不适用于多字搜索
- azure - IDX10503:Microsoft Graph 和 Azure AD 的签名验证失败