w3schools.com 的模态图像关闭预览不起作用

Question

Heres the link to the w3 page https://www.w3schools.com/howto/howto_css_modal_images.asp , and all the changes made is only in the javascript.这是 w3 页面https://www.w3schools.com/howto/howto_css_modal_images.asp的链接，所做的所有更改仅在 javascript 中。 Note that the one in the w3 page isnt working so i had to find a solution from this page and found this https://jsfiddle.net/snowMonkey/f1zav0ge/ and i took only the javascript code from here, and both still doesnt work请注意，w3 页面中的那个不起作用，所以我不得不从这个页面找到一个解决方案，发现这个https://jsfiddle.net/snowMonkey/f1zav0ge/并且我只从这里获取了 javascript 代码，但两者仍然不起作用

Heres the html:这是 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">&times;</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>

And heres the css:这是 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%;
  }
}

Answer 1

Currently, the close button on the modal window remains below the navigation and therefore cannot be clicked.目前，模态 window 上的关闭按钮仍位于导航下方，因此无法单击。 In order to be able to close the modal it is necessary to make these two changes in CSS:为了能够关闭模态，有必要在 CSS 中进行这两项更改：

On style header set z-index: 10;在样式header设置z-index: 10;

On style .modal set z-index: 11;样式.modal设置z-index: 11;

This change he made so that when the modal window opens it will stand above the navigation and the "close" button can be clicked.他所做的更改是，当模态 window 打开时，它将位于导航上方，并且可以单击“关闭”按钮。

w3schools.com 的模态图像关闭预览不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-06 08:18:55

w3schools.com 的模态图像关闭预览不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-06 08:18:55

解决方案1
0 已采纳 2020-12-06 08:18:55