Question

 function openModal(id) {
   // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById(id);
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");

      modal.style.display = "block";
      modalImg.src = img.src;
      captionText.innerHTML = img.alt;
          // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
      modal.style.display = "none";
    }

}

<div id="myModal" class="modal">
    <span class="close">×</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>

图像放大后我想缩回它。因此，例如，如果您转到https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img（这正是我在做的事情），则可以通过单击图像来放大图像。我想单击“黑色”区域以返回上一页。我在做什么并不像那个例子那样严格，但它接近吗。我不知道这叫什么，所以我不知道要寻找什么，有帮助吗？

更新

这是我正在使用的JavaScript和HTML。

Answer 1

在您提供的示例中，图像在其他窗口中打开，因此您需要使用html对其进行包装，因此可以使用js进行重定向。请参见redirect函数。

<a target="_blank" href="forest.html">
  <img src="img_forest.jpg" alt="Forest" style="width:150px">
</a>

在forest.html上：

<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
    <title>img_forest.jpg (600×400)</title>

    <script>
        var redirect = function() {
            window.location.href = "https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_thumbnail_image";      
        }
    </script>
</head>
<body style="margin: 0px;background: #0e0e0e;text-align: center;" onclick="redirect()">
    <img style="-webkit-user-select: none;" src="https://www.w3schools.com/howto/img_forest.jpg">
</body>
</html>

*更新*

基于示例更改：只需将类close添加到您的myModal div中，即可在javascript代码中向包含onclick类的第一个元素中添加一个close缩进函数。

<div id="myModal" class="modal close">

放大后缩回图像

1 个答案: