// 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 = $('.myImg');
var modalImg = $("#modalImage");
var captionText = document.getElementById("caption");
img.on("click",function () {
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr = ('src', newSrc);
captionText.innerHTML = this.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";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stony Creek Prototypes</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link rel="stylesheet" href="css/image-grid.css">
<link rel="stylesheet" href="css/modal.css">
<style type="text/css">
@font-face {
font-family: RailRoadFont;
src: url("SCPrototypes/fonts/railroader/Railroader.ttf")
}
#header {
background-size: cover;
background-position: center;
background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/IMG_6354.JPG");
background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("/images/IMG_6354.JPG");
background-image: -o-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("/images/IMG_6354.JPG");
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/IMG_6354.JPG");
}
#gallery1 {
background-size: cover;
background-position: center;
background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/image000000.jpg");
background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/image000000.jpg");
background-image: -o-linear-gradient(90deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.50) 100%), url("images/image000000.jpg");
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/image000000.jpg");
}
</style>
<!-- Jquery Link -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#"><img src="images/Stony-Creek-Nav-Brand.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<section>
<div class="jumbotron text-center" id="header">
<div class="container">
<div class="row">
<div class="col-12 text-white"> <img style="opacity: .85;" class="img-fluid" src="images/Stony Creek Logo.png" width="652" height="420" alt=""/> </div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-12 text-center" id="about">
<h1>Welcome to Stony Creek Prototypes</h1>
<p>Thank you for visiting my site. My name is Matt Arentzen and I have been a professional airbrush artist for over twenty-three years. My specialty has always been with custom painting and assembly of Class-One fallen flags, modern equipment, rolling stock and locomotives. I like to work with most shortlines & regionals, but love to work with freelance railroads. Check out my portfolio below and if questions feel free to contact me.</p>
<button type="button" class="btn btn-lg btn-dark">
<a class="text-white" href="#contact">Contact me</a>
</button>
</div>
</div>
</div>
</section>
<br>
<section>
<div class="jumbotron text-center border-3" id="gallery1">
<div class="container">
<div class="row">
<div class="col-12 text-white">
<h2>Latest Work and Portfolio</h2>
<p> A collection of accomplished scale models.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row" id="gallerygrid">
<div class="column">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6355.JPG" alt="Atlas GE U30C, as the Reading #6302" >
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6356.jpg" alt="Kato SD40R as Conrail #6972">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6369.jpg" alt="Walthers Penn Central Gondola #598212">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6370.jpg" alt="">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6371.jpg" alt="">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6372.jpg" alt="">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6994.JPG" alt="">
</div>
<div class="column">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6985.JPG" alt="Kato EMD C&O SD40 #7497, Custom Painted">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6984.JPG" alt="">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6986.JPG" alt="">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6983.JPG" alt="">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_7003.JPG" alt="">
<img class="myImg" src="https://frosty-dubinsky-bc424a.netlify.com/images/IMG_6992.JPG" alt="">
</div>
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="modalImage">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</div>
</div>
<!--<div class="row">
<div class="col-md-6 col-12 text-center"> <img class="img-fluid" src="images/IMG_6355.JPG" alt="">
<h4>Atlas GE U30C</h4>
<h6>Custom painted after the Reading #6302</h6>
</div>
<div class="col-md-6 col-12 text-center mt-md-0 mt-2"> <img class="img-fluid" src="images/IMG_6356.JPG" alt="">
<h4>Kato SD40R</h4>
<h6>Based off Conrail #6972</h6>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 col-12 text-center"><img class="img-fluid float-right" src="images/IMG_6369.JPG" alt="">
<h5>Walthers Penn Central Gondola</h5>
<h6>#598212</h6>
</div>
<div class="col-md-4 col-12 text-center"><img class="img-fluid float-left" src="images/IMG_6370.JPG" alt="">
<h5>Kato Penn Central SD40 #6065</h5>
<h6>Custom painted with heavy weathering.(a.k.a. "Deffered Maintenance Scheme")</h6>
</div>
<div class="col-md-4 col-12 text-center"><img class="img-fluid float-right" src="images/IMG_6372.JPG" alt="">
<h5>Bowser RDG Alco #5308</h5>
<h6>Is the only C630 in existence and made with custom weathering</h6>
</div>
</div>-->
<hr>
</section>
<hr>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="text-center">Contact</h2>
</div>
</div>
</div>
<hr>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-6 col-12">
<h3 class="text-center">Contact Info</h3>
<address class="text-center">
<strong>Stony Creek Prototypes</strong><br>
<abbr title="Phone">P:</abbr> +1 (999) 999-9999 <br>
<abbr title="Email">E: </abbr><a href="mailto:contact@scprototypes.com">contact@scprototypes.com</a>
</address>
</div>
<div class="col-md-6 col-12">
<h3 class="text-center">Send a Message</h3>
<form name="contact" netlify>
<div class="form-group col-12" id="contact">
<input type="text" class="form-control" id="firstName" placeholder="First Name">
<input type="text" class="form-control" id="lastName" placeholder="Last Name">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<textarea name="message" class="form-control" id="" cols="30" rows="3" placeholder="Describe your project"></textarea>
<button type="submit" class="btn btn-dark mt-2">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<p>Copyright © SCPrototypes 2020. All rights reserved.</p>
<p>Designed & Developed by <a href="https://davidloder.com">David Loder</a></p>
</div>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/modal.js"></script>
</body>
</html>
所以我正在阅读这篇文章，介绍如何使用模式效果制作多幅图像。原始帖子在这里。 Modal image galleries - multiple images。我使用了http://www.w3schools.com/howto/howto_css_modal_images.asp及其方法，然后更改了代码以使用网格类型的图像库。
我可以显示图片标题，但无法显示图片。有什么想法吗？ javascript代码确实使用了一些JQuery。
答案 0 :(得分：0)
看起来问题出在设置src-特别是Jquery中的.attr（）方法。它是要执行的功能，而不是为其设置值。
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#modalImage");
var captionText = document.getElementById("caption");
img.on("click",function () {
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr = ('src', newSrc);
captionText.innerHTML = this.alt;
});
更改：
modalImg.attr = ('src', newSrc);
到
modalImg.attr('src', newSrc);