javascript - 无法创建多个模态

我一直在一个专业的网站上工作，该网站将包含投资组合部分。我希望投资组合包含几个缩略图-单击每个缩略图时，应打开一个模态，其中包含有关该主题的更多信息。我遇到的问题是只有第一个模式打开。第二个不起作用（理想情况下，我想添加其中几个）。我已经阅读了几个月的在线帮助，并尝试了不同的解决方案。到目前为止没有任何工作。我将在此处发布代码。抱歉，该版本的长度，块状颜色和图像不足。但是我想你明白了。单击标记为“用户进行卡片分类”的按钮，以查看我遇到的问题。任何帮助表示赞赏！

// Get the modal
var modal = document.getElementsByClassName("modal")[0];

// Get the button that opens the modal
var btn = document.getElementsByClassName("button")[0];

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}



// Cache selectors
var lastId,
    topMenu = $("#nav-links"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(highlightNav);

$(window).ready(highlightNav);

function highlightNav(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }
}

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}


@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

#logo {
	max-width: 10%;
	height: auto;
	padding: 1vh;
}

nav {
	display: flex;
	position: fixed;
	z-index: 1; /* Stay on top */
  	top: 0; /* Stay at the top */
	justify-content: space-around;
	align-items: center;
	min-height: 15%;
	background-color: grey;
	font-family: 'Red Hat Display', sans-serif;
}

.navname {
	color: #ECEAEA;
	text-transform: uppercase;
	letter-spacing: 0.4vw;
	font-size: 2.2vw;
	font-family: 'Volkhov', serif;
}

#nav-links {
	display: flex;
	justify-content: space-around;
	width: 38%;

}

#nav-links li {
	list-style: none;
}

#nav-links a {
	color: #ECEAEA;
	text-decoration: none;s
	font-weight: bold;
	letter-spacing: 0.2vh;
	font-size: 1.2vw;
	-webkit-transition: 50ms all ease-out;
    -moz-transition: 50ms all ease-out;
    transition: 50ms all ease-out;
}

#nav-links li.active a {
    color: #EADA15;
}
#mainpage {
	padding-left: 1vh;
	background-color: #EADA15;
	padding-top: 1%
}

#about {
	padding-top: 14%;
}

#portfolio, #experience, #education {
	padding-top: 12%
}
.column1 {
	width: 31%;
	float: left;
	margin: 1%;
}

.column2 {
	width: 64%;
	float: right;
	margin: 1%;
}

#portrait {
	max-width: 100%;
	height: auto;
	padding: 0vh;
}

.bodytext {
	font-family: 'Red Hat Text', sans-serif;
	font-size: 1.5vw;
	line-height: 2vw;
	text-align: justify;
	vertical-align: middle;
}
.divider {
	width: 100%;
	overflow: auto;
}

.column3, .column4, .column5 {
	width: 29%;
	float: left;
	margin: 1%;
}

#portfolio {
	background-color: blue;
	overflow: auto;
}

button {
	background-color: blue;
	border: none;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  transition: all 3s;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */\
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.portfolioimage {
	cursor: pointer;
	-webkit-filter: brightness(100%);
}


.portfolioimage:hover {
    -webkit-filter: brightness(70%);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}

@media screen and (max-width:1024px){
	.nav-links a {
		font-size: 1.5vw;
	}
}

@media screen and (max-width:768px){
	nav {
	min-height: 20vh;
	}

	#logo {
	max-width: 15%;
	height: auto;
	padding: 1vh;
	}

	.navname {
		font-size: 3vh;
	}

	.nav-links{
		display: block;
		text-align: left;
		width: 15%
	}

	.nav-links li {
		line-height: 4vh;
	}

	.nav-links a {
		font-size: 2vh;
		padding: 0.5vh;
	}

	#about {
		padding-top: 11vh;
	}

	.bodytext {
	font-size: 2.5vw;
	line-height: 3vw;
	text-align: left;

}
}

/* Modal Content */
.modal-content {
 position: relative;
 animation-name: animatetop;
 animation-duration: 1.4s
}

/* Add Animation */
@keyframes animatetop {
 from {top: -500px; opacity: 0}
 to {top: 0; opacity: 1}
}

<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 name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="styles.css" rel="stylesheet">
	<script type="text/javascript" src="jquery-3.4.1.js"></script>

    <title>Adam McBride-Smith</title>
</head>
<body>
	<nav>
		<img id="logo" src="logo.png" alt="A magipie sits on an wire-rimmed AMS."/>
		<div class="navname">
			<h1>Adam McBride-Smith</h1>
		</div>
		<ul id="nav-links">
			<li>
				<a href="#about">About</a>
			</li>
			<li>
				<a href="#portfolio">Portfolio</a>
			</li>
			<li>
				<a href="#experience">Experience</a>
			</li>
			<li>
				<a href="#education">Education</a>
			</li>
		</ul>
	</nav>

	<div id="mainpage">
		<div id="about">
			<div class="about column1">
				<h4 id="bio" class="bodytext">I'm a technical communicator with a background in education and a passion for creative problem solving. Whether conducting user research, designing accessible interfaces, drafting flow diagrams, or writing documentation, I believe that collective efforts often produce the best results, and that technology can help show the way to a more open, compassionate, and democratic future. </h4>
			</div>
			<div class="about column2">
				<img id="portrait" src="portrait.jpg" alt="A picture of Adam smiling and wearing headphones"/>
			</div>
			<div id="div1" class="divider"></div>
		</div>
		<div id="portfolio">
			<h4>Portfolio</h4><br />
			<div class="portfolio column3">
				<div id="firstModal">
				<!-- Trigger/Open The Modal -->
				<button id="myBtn1" class="button"><img id="cardsortthumb" class="portfolioimage" src="cardsort.png" alt="Users conducting a card sort" width="100%" height="auto" /></button>

				<!-- The Modal -->
				<div id="myModal1" class="modal">

				  <!-- Modal content -->
				  <div class="modal-content">
					<span class="close">&times;</span>
					<h2>Web Page Usability Testing</h2><br />
					  <h3>Competencies: Usability Testing, Data Analysis, Content Management<br />
					  	Personal Characteristics: Collaboration, Critical Thinking<br />
						Tools: MS Excel</h3><br />
					  	<p>As a project for a class on research methods at Portland State University, I participated in exploratory usability testing of a web page. The page was designed to help students and faculty in the Professional and Technical Writing Program get answers to their questions about the program. The purpose of the study was to determine whether the information categories used by the page aligned with user preferences.</p><br />
					  <img id="cardsortfull" src="cardsort.png" alt="Users conducting a card sort" width="100%" height="auto" /><br /><br />
						<p>We started our research by conducting both open and closed <strong>card sorts</strong>. During our closed card sort, printed category cards that matched the actual site menu were distributed among the groups of users. Subcategory cards were also distributed. Our test participants then grouped the subcategory cards under their preferred headings. Data from each card sort was collected and collated to show the user preferences of the group as a whole.
					    </p><br />
					   <img id="simmat" src="simmat.jpg" alt="An Excell spreadsheet showing a similarity matrix" width="100%" height="auto" /><br />
					  	<p>Following the card sorts, I participated in creating a <strong>similarity matrix</strong> to describe the groupings preferred by our card sort participants, and to compare those preferences with the actual information design of the MPTW web page. We were able to highlight areas where the site aligned with user expectations, but also important areas where it was not aligned. Analyzing our data against the actual site brought to light some of the idiosycrasies that can result when legacy content is updated with more recent content, such as information “islands,” and inconsistent formatting. At the conclusion of our study, we compiled our findings and presented them to the head of the MPTW program.</p>
					  	<br />
			</div>
			</div>
			</div>
			</div>
			<div class="portfolio column4">
				<div id="secondModal">
				<!-- Trigger/Open The Modal -->
				<button id="myBtn2" class="button"><img id="personathumb" class="portfolioimage" src="persona2.jpg" alt="Users conducting a card sort" width="100%" height="auto" /></button>

				<!-- The Modal -->
				<div id="myModal2" class="modal">

				  <!-- Modal content -->
				  <div class="modal-content">
					<span class="close">&times;</span>
					<h2>Web Page Usability Testing</h2><br />
					  <h3>Competencies: Usability Testing, Data Analysis, Content Management<br />
					  	Personal Characteristics: Collaboration, Critical Thinking<br />
						Tools: MS Excel</h3><br />
					  	<p>As a project for a class on research methods at Portland State University, I participated in exploratory usability testing of a web page. The page was designed to help students and faculty in the Professional and Technical Writing Program get answers to their questions about the program. The purpose of the study was to determine whether the information categories used by the page aligned with user preferences.</p><br />
					  <img id="persona1" src="persona1.jpg" alt="Users conducting a card sort" width="100%" height="auto" /><br /><br />
						<p>We started our research by conducting both open and closed <strong>card sorts</strong>. During our closed card sort, printed category cards that matched the actual site menu were distributed among the groups of users. Subcategory cards were also distributed. Our test participants then grouped the subcategory cards under their preferred headings. Data from each card sort was collected and collated to show the user preferences of the group as a whole.
					    </p><br />
					   <img id="persona2" src="persona2.jpg" alt="An Excell spreadsheet showing a similarity matrix" width="100%" height="auto" /><br />
					  	<p>Following the card sorts, I participated in creating a <strong>similarity matrix</strong> to describe the groupings preferred by our card sort participants, and to compare those preferences with the actual information design of the MPTW web page. We were able to highlight areas where the site aligned with user expectations, but also important areas where it was not aligned. Analyzing our data against the actual site brought to light some of the idiosycrasies that can result when legacy content is updated with more recent content, such as information “islands,” and inconsistent formatting. At the conclusion of our study, we compiled our findings and presented them to the head of the MPTW program.</p>
					  	<br />
			</div>
			</div>
			</div>
			</div>
			<div class="portfolio column5">
				<h4>#</h4><br />
				<h4>#</h4><br />
				<h4>#</h4><br />
				<h4>#</h4><br />
				<h4>#</h4><br />
				<h4>#</h4><br />
				<h4>#</h4><br />
				<h4>#</h4><br />
			</div>
		</div>
		<div id="div2" class="divider"></div>
		<div id="experience">
			<h4>Experience</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
		</div>
		<div id="education">
			<h4>Education</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
			<h4>#</h4><br />
		</div>
	</div>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

最佳答案

var btn = document.getElementsByClassName("button")[0];此行仅提及从列表中选择第一个元素（[0]），这就是为什么它仅适用于第一个元素的原因。

var btn = document.getElementsByClassName("button")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

代码的这一部分明确选择第一个按钮，并向其添加一个事件侦听器。而是这样写。

var btn = document.getElementsByClassName("button");
btn.forEach((b,i)=>{
  b.onclick = function() {
    modal[i].style.display = "block";
  }
})

如果您有多个模态，也可以这样做。

关于javascript - 无法创建多个模态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59484430/