使用Bulma CSS时模态框无法显示的问题求助

看起来你在用Bulma框架做模态框，但点击按钮没反应对吧？我来帮你捋捋问题出在哪：

问题根源 #

你的代码里用了refs.modalEdicion.open()这种写法，但Bulma原生模态框并没有内置open()方法，也没有默认的refs对象。要让模态框正常显示，核心是通过添加/移除is-active类来控制显示状态，同时得正确拿到模态框的DOM元素。

修正后的完整代码 #

<!-- 触发按钮 -->
<button class="button is-warning is-pulled-right" onclick="openModal()">
  <span>Editar</span>
</button>

<!-- 模态框 -->
<div class="modal" id="modalEdicion">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="">
    </p>
  </div>
  <!-- 补充完整的关闭按钮 -->
  <button class="modal-close is-large" aria-label="close" onclick="closeModal()"></button>
</div>

<script>
// 获取模态框DOM元素
const modal = document.getElementById('modalEdicion');

// 打开模态框的函数
function openModal() {
  modal.classList.add('is-active');
}

// 关闭模态框的函数
function closeModal() {
  modal.classList.remove('is-active');
}

// 点击模态框背景也触发关闭
modal.querySelector('.modal-background').addEventListener('click', closeModal);
</script>

关键修正点 #

• 把按钮的onclick改为调用自定义的openModal()函数，替换原来不存在的refs.modalEdicion.open()
• 通过document.getElementById('modalEdicion')正确获取模态框元素
• 用classList.add('is-active')显示模态框，classList.remove('is-active')隐藏模态框
• 补充了完整的关闭按钮，还加了点击背景关闭的逻辑，让交互更完整

另一种简化写法（不用单独函数） #

如果不想写单独的函数，也可以直接把逻辑写在onclick里：

<button class="button is-warning is-pulled-right" onclick="document.getElementById('modalEdicion').classList.add('is-active')">
  <span>Editar</span>
</button>

<div class="modal" id="modalEdicion">
  <div class="modal-background" onclick="document.getElementById('modalEdicion').classList.remove('is-active')"></div>
  <div class="modal-content">
    <p class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close" onclick="document.getElementById('modalEdicion').classList.remove('is-active')"></button>
</div>

这样修改后，点击「Editar」按钮应该就能正常弹出模态框啦！

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