我尝试为我的简历页面创建一个弹出式模态，只有我的第一个弹出式模态工作，模态2和3都没有弹出，当我尝试点击每个模态的按钮。我试着给出模态"id"唯一的数字，但没有工作，我试着替换最后两个情态动词的名字，但它没有工作。
我应该实现一个onClick函数还是我错过了什么?
const modal = document.querySelector("#modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close-button");
openModal.addEventListener("click", () => {
modal.showModal();
});
closeModal.addEventListener("click", () => {
modal.close();
});.modal {
padding: 5em;
max-width: 100ch;
}
.modal2 {
padding: 1em;
margin: 5em;
max-width: 100ch;
}
.modal3 {
padding: 1em;
max-width: 50ch;
}<dialog class="modal" id="modal">
<h2>Bank Project Info</h2>
<p>I have been a part of a group were we created a online bank in which users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>
<button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal2">
<h2>School Project Info</h2>
<p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class had.</p>
<button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal3">
<h2>ASP.NET Project Info</h2>
<p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for the project.</p>
<button class="button close-button">close</button>
</dialog>您的代码只运行在一个元素上，您需要为每个元素都编写代码。
复制/粘贴解决方案是为每个按钮制作多个副本。这可不妙。
更好的解决方案是循环遍历html集合并绑定事件。
// get all the buttons that open the modals
const openButtons = document.querySelectorAll("[data-opens]");
// loop over the buttons
openButtons.forEach(function(btn) {
// get the selector
var modalSelector = btn.dataset.opens;
btn.addEventListener("click", function() {
document.querySelector(modalSelector).showModal();
});
});
//get all the close buttons and attach events
// get all the buttons that open the modals
const closeButtons = document.querySelectorAll(".close-button");
closeButtons.forEach(function(btn) {
btn.addEventListener("click", function() {
// find the parent that is a modal element and close it
btn.closest('.modal').close();
});
});.modal {
padding: 5em;
max-width: 100ch;
}
.modal2 {
padding: 1em;
margin: 5em;
max-width: 100ch;
}
.modal3 {
padding: 1em;
max-width: 50ch;
}<dialog class="modal" id="modal">
<h2>Bank Project Info</h2>
<p>I have been a part of a group were we created a online bank in wich users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>
<button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal2">
<h2>School Project Info</h2>
<p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class
had.</p>
<button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal3">
<h2>ASP.NET Project Info</h2>
<p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for
the project.</p>
<button class="button close-button">close</button>
</dialog>
<button data-opens="#modal">1</button>
<button data-opens="#modal2">2</button>
<button data-opens="#modal3">3</button>另一个解决方案是事件委托
// Bind event to an element that contains all of the modals and open buttons
document.body.addEventListener("click", function(evt) {
// get was clicked
const elem = event.target;
// determine if we clicked the open button or the close button
if (elem.matches('[data-opens]')) {
var modalSelector = elem.dataset.opens;
document.querySelector(modalSelector).showModal();
} else if (elem.matches('.close-button')) {
elem.closest(".modal").close();
}
});.modal {
padding: 5em;
max-width: 100ch;
}
.modal2 {
padding: 1em;
margin: 5em;
max-width: 100ch;
}
.modal3 {
padding: 1em;
max-width: 50ch;
}<dialog class="modal" id="modal">
<h2>Bank Project Info</h2>
<p>I have been a part of a group were we created a online bank in wich users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>
<button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal2">
<h2>School Project Info</h2>
<p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class
had.</p>
<button class="button close-button">close</button>
</dialog>
<dialog class="modal" id="modal3">
<h2>ASP.NET Project Info</h2>
<p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for
the project.</p>
<button class="button close-button">close</button>
</dialog>
<button data-opens="#modal">1</button>
<button data-opens="#modal2">2</button>
<button data-opens="#modal3">3</button>