但在给多个按钮分别绑定不同对话框时，常见问题也会出现。比如点第二个按钮没反应，或者所有按钮最终都弹出同一个对话框。

说到底，症结就在于：没有为每个对话框及其对应按钮设置唯一标识，并进行彼此独立的控制。

正确做法：ID 驱动 + 独立引用

首先，要为每个按钮和对话框分配唯一 id，确保 DOM 查询精准无歧义：

How to Make DNA in JS
How To Make MadLibs in JS


DNA Generator
I am a dialog box for DNA logic.
Close



MadLibs Creator
Hello World! Fill in the blanks to build your story.
Close

接着，在 Ja vaScript 中分别获取并绑定事件。

每个对话框必须有独立变量引用，不可复用同一 dialog 变量：

document.addEventListener('DOMContentLoaded', function() {
// 获取两个独立对话框元素
const dnaDialog = document.getElementById('dna-dialog');
const madlibsDialog = document.getElementById('madlibs-dialog');

// 绑定 DNA 按钮
const dnaBtn = document.getElementById('dna-btn');
if (dnaBtn) {
dnaBtn.addEventListener('click', () => dnaDialog.showModal());
}

// 绑定 MadLibs 按钮
const madlibsBtn = document.getElementById('madlibs-btn');
if (madlibsBtn) {
madlibsBtn.addEventListener('click', () => madlibsDialog.showModal());
}

// 统一处理关闭按钮（支持两个对话框）
document.querySelectorAll('.c').forEach(btn => {
btn.addEventListener('click', function() {
const dialog = this.closest('dialog');
if (dialog) dialog.close();
});
});
});

注意：推荐使用 showModal() 而非 show()。

showModal() 可以获得标准模态行为，包括焦点锁定、Esc 关闭、背景遮罩。

show() 是非模态的，常导致交互异常。

进阶优化：减少重复代码

如果按钮数量继续增加，可以封装初始化逻辑，减少重复绑定：

function setupDialogTrigger(triggerId, dialogId) {
const trigger = document.getElementById(triggerId);
const dialog = document.getElementById(dialogId);
if (trigger && dialog) {
trigger.addEventListener('click', () => dialog.showModal());
}
}

// 批量注册
setupDialogTrigger('dna-btn', 'dna-dialog');
setupDialogTrigger('madlibs-btn', 'madlibs-dialog');

补充说明