Bulma CSS 模态未显示

Question

我正在使用 Bulma 作为我的 CSS 框架，并且在尝试使用它们的模态时，它们根本没有样式化，就好像我遗漏了什么一样。

叠加层在那里，x 按钮似乎就位并且可见，但内容显示为灰色。

我正在使用此代码：

<body>

<div id="modal-id" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-content">
        Any other Bulma elements you want
    </div>
    <button class="modal-close is-large" aria-label="close"></button>
</div>

</body>

所有其他 Bulma 元素都在工作。

注意：我不是在询问 JS 部分以及如何在点击时实际显示模式。我有纯粹的 CSS 问题。

Answer 1

但是目前正在显示，没有问题！

如果你想要设计，比如卡片，请将 .modal-content div 更改为：

  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      YOUR CONTENT
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>

Bulma CSS 模态未显示

Bulma CSS modal not showing

html

css

modal-dialog

bulma