在同一 html 页面上复制对话框将不起作用 [已关闭]

Question

codepen 上的代码

<dialog></dialog><button></button>
<dialog></dialog><button></button>

我设置了此代码及其 css 和 javascript，通过单击按钮选择网站的语言来显示对话框。

当我将此对话框复制到网站的页脚时，它不再起作用，当单击页脚上的对话框时，它不执行任何操作，但第一个对话框仍然有效。

我尝试为 javascript 代码添加 id，但没有任何效果。

Answer 1

以下是如何实现此目标的基本示例：

// Get references to the dialog elements and buttons
const dialog1 = document.getElementById('dialog1');
const openDialog1Btn = document.getElementById('openDialog1');
const closeDialog1Btn = document.getElementById('closeDialog1');

const dialog2 = document.getElementById('dialog2');
const openDialog2Btn = document.getElementById('openDialog2');
const closeDialog2Btn = document.getElementById('closeDialog2');

// Add event listeners to open and close the dialog boxes
openDialog1Btn.addEventListener('click', () => {
  dialog1.showModal();
});

closeDialog1Btn.addEventListener('click', () => {
  dialog1.close();
});

openDialog2Btn.addEventListener('click', () => {
  dialog2.showModal();
});

closeDialog2Btn.addEventListener('click', () => {
  dialog2.close();
});

dialog {
  width: 200px;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

<dialog id="dialog1">
  <p>This is dialog 1</p>
  <button id="closeDialog1">Close</button>
</dialog>
<button id="openDialog1">Open Dialog 1</button>

<dialog id="dialog2">
  <p>This is dialog 2</p>
  <button id="closeDialog2">Close</button>
</dialog>
<button id="openDialog2">Open Dialog 2</button>