如何将模态图像的标题转换为链接？答案

【问题标题】：How do I turn a modal image's caption into a link?如何将模态图像的标题转换为链接？
【发布时间】：2021-09-02 22:10:51
【问题描述】：

我正在开发一个图片库网站，我认为拥有模态图像会是一个不错的补充。在 w3schools 的指南和其他一些资源的帮助下，我设法为我的规范创建了工作模式图像。但是，如果单击，我还希望模态框内标题的后半部分作为指向另一个页面的链接，但我无法让它工作。

来自 w3schools 的 JavaScript 根据相关图像的 alt 属性中的文本添加标题。但是，由于它已经是一个属性，所以我不能将标题的后半部分包裹在 <a href=""></a> 中，否则它会停止工作。

以下是模态图像的代码及其标题目前在我的网站上的工作示例：

<!DOCTYPE html>
<html lang="en-US">
<html>
<head>
<meta charset="utf-8">
<title>Modal Testing</title>
<link rel="stylesheet" type="text/css" href="">
<style>
body{font-family: Arial, Helvetica, sans-serif;}
.gallery img{
    opacity: 1;
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.gallery img:hover{
    opacity: .5;
    cursor: pointer;
}
.modal{
    display: none;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
}
.modal-content{
    margin: auto;
    display: block;
    max-width: 700px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#caption{
    margin: auto;
    display: block;
    width: 80%;
    max-width: 60%;
    text-align: center;
    position: absolute;
    left: 20%;
    bottom: 10%;
    color: #ffffff;
    /*background-color:#ffffff;*/
}
.close{
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  transition: 0.3s;
}
.close:hover,
.close:focus{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modalImg">
        <div id="caption"></div>
    </div>
    <!-- The Gallery -->
    <div class="gallery">
        <img class="myImg" src="https://via.placeholder.com/500x500" alt="Test Caption - Image 1">
        <img class="myImg" src="https://via.placeholder.com/400x500" alt="Test Caption - Image 2">
        <img class="myImg" src="https://via.placeholder.com/500x400" alt="Test Caption - Image 3">
    </div>  
<script>
var modal = document.getElementById("myModal");

var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("modalImg");
var captionText = document.getElementById("caption");

    for(i=0;i<img.length;i++){    
        img[i].onclick = function(){
        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>

虽然我涉足 HTML 和 CSS，但我必须承认我对 JavaScript 仍然很陌生，我根本无法弄清楚这一点。我想知道使用 w3 的标题方法是否可以实现我正在寻找的东西，或者我是否应该寻找另一种方法来为我的模态图像添加标题。

【问题讨论】：

标签： javascript html image hyperlink modal-dialog

【解决方案1】：

一种方法是使用标题 div 作为标题，而不是像您所做的那样使用图像的 alt。这样，您就可以使标题与通常的 a-Tag 链接。（这很可能不是唯一的方法，但我认为它是最简单的）

<!DOCTYPE html>
<html lang="en-US">
<html>
<head>
<meta charset="utf-8">
<title>Modal Testing</title>
<link rel="stylesheet" type="text/css" href="">
<style>
body{font-family: Arial, Helvetica, sans-serif;}
.gallery img{
    opacity: 1;
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.gallery img:hover{
    opacity: .5;
    cursor: pointer;
}
.modal{
    display: none;
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
}
.modal-content{
    margin: auto;
    display: block;
    max-width: 700px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#caption{
    margin: auto;
    display: block;
    width: 80%;
    max-width: 60%;
    text-align: center;
    position: absolute;
    left: 20%;
    bottom: 10%;
    color: #ffffff;
    /*background-color:#ffffff;*/
}
.close{
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  transition: 0.3s;
}
.close:hover,
.close:focus{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="modalImg">
        <div id="caption">Your Caption <a href="#">Link</a></div>
    </div>
    <!-- The Gallery -->
    <div class="gallery">
        <img class="myImg" src="https://via.placeholder.com/500x500" alt="Test Caption - Image 1">
        <img class="myImg" src="https://via.placeholder.com/400x500" alt="Test Caption - Image 2">
        <img class="myImg" src="https://via.placeholder.com/500x400" alt="Test Caption - Image 3">
    </div>  
<script>
var modal = document.getElementById("myModal");

var img = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("modalImg");
var captionText = document.getElementById("caption");

    for(i=0;i<img.length;i++){    
        img[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        }
    }
var span = document.getElementsByClassName("close")[0];
span.onclick = function(){ 
    modal.style.display = "none";
}
</script>   
</body>
</html>

但是，我还希望模态框内的标题的后半部分如果单击，可以用作指向另一个页面的链接，但我无法访问工作

我不是 100% 你所说的“下半场”，但我现在刚刚将标题拆分为文本和链接，所以你可以随意编辑它。

【讨论】：