使用 html 标签打开模态框<dialog>

Question

首先，我绝对是 JavaScript 的菜鸟，并试图学习这一点，所以请不要因为我的问题而烤我。

我的问题：我的网站上有 3 个标签，并且想要打开和关闭对话框以设置“打开”属性。 不幸的是，我只能打开 3 个模态中的 1 个（第一个）。

<!-- MODAL 1 -->
<button class="button open-button">
    click here
</button>

<dialog class="modal">
    <h4 class="modal__title">Modal 1</h4>
    <button class="button close-button">X</button>
</dialog>

<!-- MODAL 2 -->
<button class="button open-button">
    click here
</button>

<dialog class="modal">
    <h4 class="modal__title">Modal 2</h4>
    <button class="button close-button">X</button>
</dialog>

<!-- MODAL 3 -->
<button class="button open-button">
    click here
</button>

<dialog class="modal">
    <h4 class="modal__title">Modal 3</h4>
    <button class="button close-button">X</button>
</dialog>

这就是我目前的js：

const modal = document.querySelector(".modal");
const openModal = document.querySelectorAll(".open-button");
const closeModal = document.querySelector(".close-button");

openModal.addEventListener("click", () => {
  modal.showModal();
});

closeModal.addEventListener("click", () => {
  modal.close();
});

我不确定，当我单击按钮时，如何告诉 js 能够打开多个模式。

Answer 1

在 NodeList 中收集每个class 。

将点击事件绑定到每个button.open 。 单击button.open时，打开与其索引对应的dialog.modal 。

将点击事件绑定到每个button.close 。 单击button.close时，关闭button.close所在的dialog.modal 。

细节在例子中注释

 // Collect each class into a NodeList const modal = document.querySelectorAll(".modal"); const open = document.querySelectorAll(".open"); const close = document.querySelectorAll(".close"); /* Bind the click event to each button.open open the dialog.modal that corresponds to current index (idx) */ open.forEach((btn, idx) => btn.addEventListener("click", e => modal[idx].showModal())); /* Bind the click event to each button.close close the dialog.modal that is the ancestor of the clicked button.close */ close.forEach(btn => btn.addEventListener("click", e => btn.closest('.modal').close()));

 dialog, fieldset { border-radius: 4px; } header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; } h4 { margin: 0; } footer { display: flex; justify-content: flex-end; margin: 0; padding-top: 6px; }

 <menu> <button class="open" type='button'>Open 1</button> <button class="open" type='button'>Open 2</button> <button class="open" type='button'>Open 3</button> </menu> <dialog class="modal"> <header> <h4>Modal 1</h4><button class="close" type='button'>X</button> </header> <fieldset> <p>Oh no. I'm late to class, bitch. </p> <p>Earth's going tah tah. You might wanna do that thing where you find a new universe where you can suck yourself off. </p> <p>God, Grandpa, you're such a dick. </p> </fieldset> <footer> <button class='close' type='button'>Cancel</button> </footer> </dialog> <dialog class="modal"> <header> <h4>Modal 2</h4><button class="close" type='button'>X</button> </header> <fieldset> <p>Then let me GET to know you!</p> <p>I'm the Devil, what should I do when I fail? Give myself an ice cream?</p> <p>If I've learned one thing, it's that before you get anywhere in life, you gotta stop listening to yourself.</p> </fieldset> <footer> <button class='close' type='button'>Close</button> </footer> </dialog> <dialog class="modal"> <header> <h4>Modal 3</h4><button class="close" type='button'>X</button> </header> <fieldset> <p>Oh god, oh, I blame myself. Oh, what a tragedy. Oh, well, he's bones now. I guess all debts are paid. </p> <p>No! Look away! I'm making an egg, Mom! Ugh…! I'm making an egg! </p> <p>If you break the rules, try to leave or lose the game, you will die. Just like Saaaaw.</p> </fieldset> <footer> <button class='close' type='button'>Close</button> </footer> </dialog>