javascript - 如何在模态 HTML 上显示图像

Question

任何人都可以帮助我如何通过点击 url 图像显示模态图像，这是我的代码

var modal = document.getElementById('myModal');
var img = document.getElementById('ok');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = myImg.src;
  captionText.innerHTML = myImg.value;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

<img id="myImg" src="home.gif" alt="Trolltunga, Norway" width="300" height="200" display="none">
<div id="ok" style="width: 50px; height: 30px; background-color: red">Click</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

在页面中，我只想显示图片链接 url，没有 <img id = "myImg" src="url"/> 标签。每当我点击链接 url 时，图像模态就会显示

Answer 1

我希望你正在寻找这个:

var modal = document.getElementById('myModal');
var img = document.getElementById('ok');
var myImg = document.getElementById('myImg').src;
var myImgAlt = document.getElementById('myImg').alt;
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = myImg;
    document.getElementById('img01').style.width = "300px";
    document.getElementById('img01').style.height = "200px";
    captionText.innerHTML = myImgAlt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
    modal.style.display = "none";
}

<img id="myImg" src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2012/11/152964589-welcome-home-new-cat-632x475.jpg" alt="Trolltunga, Norway" width="300" height="200" display="none">
        <div id = "ok" style="width: 50px; height: 30px; background-color: red">Click</div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>