javascript - 如何重新为多个图像创建模态？
问题描述
我正在从事一个涉及一个页面上的多个模式的辅助项目。我遵循了 W3 学校模式教程，但它并没有完全按照我想要的方式执行。注意：我对 JS 非常陌生。
单击模式后，如何使用不同的 SRC ( https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg )提供相似但不同的图像，而不是显示相同的图像放大在？
这是我的 codepen 项目的链接：https ://codepen.io/jkramer25/project/editor/AooxzJ
谢谢。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="assets/css/style.css">
<title>Horizontal Timeline</title>
</head>
<body>
<section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
<div class="cd-h-timeline__container container">
<div class="cd-h-timeline__dates">
<div class="cd-h-timeline__line">
<ol>
<li><a href="#0" data-date="01/01/1839" class="cd-h-timeline__date cd-h-timeline__date--selected">1839</a></li>
<li><a href="#0" data-date="28/02/1841" class="cd-h-timeline__date">1841</a></li>
<li><a href="#0" data-date="28/02/1902" class="cd-h-timeline__date">1902</a></li>
<li><a href="#0" data-date="28/02/1904" class="cd-h-timeline__date">1904</a></li>
<li><a href="#0" data-date="28/02/1912" class="cd-h-timeline__date">1912</a></li>
<li><a href="#0" data-date="28/02/1918" class="cd-h-timeline__date">1918</a></li>
</ol>
<span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
</div> <!-- .cd-h-timeline__line -->
</div> <!-- .cd-h-timeline__dates -->
<ul>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
<li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
</ul>
</div> <!-- .cd-h-timeline__container -->
<div class="timeline-indicators-flex container"><!--Previous, Next, Swipe tip-->
<div class="timeline-indication color-contrast-medium align-left">
<p>Previous</p>
</div>
<div class="timeline-indication color-contrast-medium align-center">
<p id="swipe-tip">Swipe or Use Arrows to Navigate</p>
</div>
<div class="timeline-indication color-contrast-medium align-right">
<p>Next</p>
</div>
</div>
<div class="cd-h-timeline__events">
<ol>
<!-- ------------------------SLIDE 1-1839----------------------- -->
<li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
<div class="cd-h-timeline__event-content container">
<!--
<div class="jumplinks-timeline">
<a href="#hammacher-history">
<div class="jumplinks-timeline-button">Hammacher History</div>
</a>
<a href="#us-history">
<div class="jumplinks-timeline-button">US History</div>
</a>
</div>
-->
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1839</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="myImg" src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History-100x100_1.jpg" style="width: 100%;max-width: 100px;">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Albert Hammacher, the man who would eventually provide half of our company's name, is born on February 16, 1839 in Leichlingen, a town in the North Rhine-Westphalia region of Germany. Hammacher would come to be viewed as one of the leading figures in the hardware industry in the U.S. and Germany during the late 19th and early 20th centuries.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="myImg"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
United States Army officer George Armstrong Custer is born in Ohio. Custer developed a strong reputation leading Union
troops during the Civil War-despite graduating last in his class at West Point-and attained the rank of brigadier
general at age 23. After the Civil War, he was dispatched to the west to fight in the Indian Wars. Custer and all the
men with him (two of his brothers among them) were killed at the Battle of the Little Bighorn in 1876, in a battle that
has come to be known as "Custer's Last Stand."
</p>
</div>
</li>
<!-- ------------------------SLIDE 2-1841----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1841</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Schlemmer, whose name will come to be associated with a landmark New York City store and America's
longest-running catalog, is born on April 20, 1841 in the Westphalia region of Germany.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1841_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
William Henry Harrison served the shortest tenure of any U.S. president, just 32 days, and became the first to die in
office. Vice President John Tyler is sworn in as the nation's 10th president on April 4, 1841.
</p>
</div>
</li>
<!-- ------------------------SLIDE 3-1902----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1902</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Extraordinary-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish, combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Media-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed in a
strong, leather-edged canvas roll."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1902_Catalog-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 4-1904----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div id="#hammacher-history"></div>
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1904</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_HS_History-100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_Media_100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed
in a
strong, leather-edged canvas roll."
</p>
<hr class="timeline-divider">
<div id="us-history"></div>
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1904_Catalog_100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal
workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling
tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 5-1912----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1912</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_HS_History100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_US_History-100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_Extraordinary100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish,
combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Catalogs</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1912_Catalog100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Hammacher Schlemmer publishes catalog No. 115, a 300-page edition featuring tools for machinists and metal
workers. The
opening page serves notice of the company's tradition for quality and innovation: "Since 1848 we have been selling
tools
to the trade. We have always aimed to sell strictly high-grade goods, and to keep in advance of all improvements
introduced which bore evidence of real practical value."
</p>
</div>
</li>
<!-- ------------------------SLIDE 5-1918----------------------- -->
<li class="cd-h-timeline__event text-component">
<div class="cd-h-timeline__event-content container">
<div class=timeline-image-flex>
<div>
<h2 class="cd-h-timeline__event-title">1918</h2>
<em class="cd-h-timeline__event-date">Hammacher History</em>
</div>
<div class="timeline-modal-instruct">
<p class="timeline-modal-tip">Click on images to enlarge</p>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_HS_History100x100.jpg">
</div>
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Despite the fact that there are fewer than 600 automobiles in New York City and no gas stations, Hammacher
Schlemmer
introduces the first Auto Parts Department, selling parts and tools for the "horseless carriage" including a
Motorist
Touring Kit, which allows drivers to fix a flat or blown gasket.As the automobile gains in popularity and begins
to come
into more widespread use, Hammacher Schlemmer purchases their own automobile which they used to begin the first
home-delivery parcel service for customers-a novel idea in its day.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">US History</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_US_History100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Theodore Roosevelt becomes the first American President to ride in an automobile when he rides in a Columbia
Electric
Victoria through Hartford, Connecticut.
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Extraordinary Items</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_Extraordinary100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
Weighing up to 750 lbs., the "Star" Screw-cutting Engine Lathe was operated via foot pedals. Chief among its many
virtues was its outstanding construction, described as "Heavy, rigid, accurate, correct in design and finish,
combining
throughout the best material, with the highest class of workmanship."
</p>
<hr class="timeline-divider">
<div class=timeline-image-flex>
<em class="cd-h-timeline__event-date">Media</em>
<img class="responsive-timeline-img"
src="https://storage.googleapis.com/img.triggermail.io/hammacher/1918_Media100x100.jpg">
</div>
<p class="cd-h-timeline__event-description color-contrast-medium">
To help motorists reduce their repair bills, Hammacher Schlemmer offers the tourist autokit, "the highest type of
repairing outfit procurable". The kit contains 38 tools for both permanent and emergency use, "conveniently packed
in a
strong, leather-edged canvas roll."
</p>
</div>
</li>
</ol>
</div> <!-- .cd-h-timeline__events -->
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<!-- Scroll to top button -->
<footer class="timeline-scrollToTopBtn">
<button class="scrollToTopBtn">↑</button>
</footer>
<script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
<script src="assets/js/swipe-content.js"></script> <!-- A Vanilla JavaScript plugin to detect touch interactions -->
<script src="assets/js/main.js"></script>
<script src="assets/js/timeline-scrollToTopBtn.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
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 = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').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>
</body>
</html>
解决方案
您可以做的是将“大”图像添加为图像的额外属性，如下所示：
<img class="myImg" src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History-100x100_1.jpg" style="width: 100%;max-width: 100px;" data-large-src="https://storage.googleapis.com/img.triggermail.io/hammacher/1839_HS_History.jpg">
并替换var newSrc = this.src;为var newSrc = this.dataset.largeSrc;或var newSrc = this.getAttribute('data-large-src');
我没有对此进行测试，但这应该可以。
您可以在此处阅读有关dataset属性的更多信息：
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
推荐阅读
- c# - 退出应用程序时关闭使用的 WinSCP 会话（在使用中）
- dafny - 如何在 Dafny 中将一个值转换为两个字节？
- python - 具有对角权重矩阵的自定义层
- python - 具有嵌套列表、if 语句和范围步骤的列表理解
- regex - 如何在正则表达式语句中找到 [**]，以便我可以将 multi_line_start_pattern 用于 aws cloudwatch 代理
- ruby-on-rails - 在 Swagger 文档中定义对象数组
- sql - 同一张表TSQL上的多个JOIN
- node.js - Skype 面试 API
- python - 我正在尝试根据一些规则将字典键与其值匹配，而不使用其他库
- graphql - 在缓存重定向中找不到缓存键