Javascript 如何重新创建多个图像的模态？
我正在做一个在一个页面上包含多个模态的辅助项目。我遵循了W3学校模式教程，但它没有完全按照我想要的方式执行。注意：我对JS非常陌生 在点击模式后，我如何使用不同的SRC（）提供类似但不同的图像，而不是显示放大的相同图像 以下是指向我的codepen项目的链接： 谢谢Javascript 如何重新创建多个图像的模态？,javascript,html,css,modal-dialog,Javascript,Html,Css,Modal Dialog,我正在做一个在一个页面上包含多个模态的辅助项目。我遵循了W3学校模式教程，但它没有完全按照我想要的方式执行。注意：我对JS非常陌生 在点击模式后，我如何使用不同的SRC（）提供类似但不同的图像，而不是显示放大的相同图像 以下是指向我的codepen项目的链接： 谢谢 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <m
<!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>
document.getElementsByTagName（“html”）[0].className+=“js”；
水平时间线
先前的
滑动或使用箭头导航
下一个
1839
哈马彻历史
单击图像放大
阿尔伯特·哈马彻（Albert Hammacher）于1839年2月16日出生于德国北莱茵-威斯特伐利亚地区的莱奇林根（Leichlingen）。哈马彻将逐渐被视为19世纪末20世纪初美国和德国硬件行业的领军人物之一。
美国历史
美国陆军军官乔治·阿姆斯特朗·卡斯特出生于俄亥俄州。卡斯特在领导工会方面建立了良好的声誉
尽管他在西点军校班上最后一名毕业并获得准将军衔，但他在内战期间仍参军
将军，23岁。内战结束后，他被派往西方参加印度战争。卡斯特和所有的
与他同行的人（包括他的两个兄弟）在1876年的小大角战役中被杀，这场战役
被称为“卡斯特的最后一站”
1841
哈马彻历史
单击图像放大
William Schlemmer的名字将与纽约市的一家地标性商店和美国的
运行时间最长的目录于1841年4月20日在德国威斯特伐利亚地区诞生。
美国历史
威廉·亨利·哈里森（William Henry Harrison）是美国总统任期最短的一位，只有32天，并且是第一位在2009年去世的总统
办公室。副总统约翰·泰勒于1841年4月4日宣誓就任美国第十任总统。
1902
哈马彻历史
单击图像放大
尽管纽约市只有不到600辆汽车，而且没有加油站，哈马彻·施莱默（Hammacher Schlemmer）说
介绍了第一汽车配件部，销售“无马马车”的配件和工具，其中包括一名司机
旅行套件，允许驾驶员固定平垫圈或充气垫圈。随着汽车的普及和开始普及
为了得到更广泛的使用，哈马彻·施莱默购买了他们自己的汽车，这是他们第一次使用汽车
为客户提供送货上门包裹服务——这是当时的一个新想法。
美国历史
西奥多·罗斯福乘坐哥伦比亚电动车，成为第一位乘坐汽车的美国总统
维多利亚到康涅狄格州哈特福德。
非常项目
重量高达750磅的“星形”螺纹切削车床通过脚踏板操作。在它的众多中最重要的
其优点是其卓越的结构，被描述为“重、硬、准确、设计和饰面正确、结合”
采用最好的材料，采用最高级别的工艺。”
媒体
<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">