点击id为test的div后如何将隐藏的modal div的display设为block

方案1：内联点击事件（最简便） #

直接给触发点击的#test div添加onclick属性即可，修改后代码如下：

<div id="test" class="br3 mb3 ph3 pv2 ba b--black-10 flex justify-between items-center pointer hover-b--primary5" onclick="document.getElementById('modal').style.display='block'">
 <div class="f5 flex items-center">Test1</div>
</div>

添加该属性后，点击此div就会自动将#modal的display属性改为block，展示弹窗内容。

方案2：独立JS事件监听（更易维护） #

如果不希望用内联事件，可将以下JS代码放到页面</body>标签之前，或包裹在DOM加载完成的监听逻辑中：

document.addEventListener('DOMContentLoaded', function() {
  const trigger = document.getElementById('test');
  const modal = document.getElementById('modal');
  // 绑定点击显示逻辑
  trigger.addEventListener('click', () => {
    modal.style.display = 'block';
  });

  // 可选扩展：点击弹窗以外区域关闭弹窗，不需要可删除
  window.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.style.display = 'none';
    }
  });
});

注意：需确保页面内id="test"和id="modal"的元素唯一，重复id会导致选择器匹配失败，功能无法正常生效。

内容的提问来源于stack exchange，提问作者terciato