通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻项目构建教程学习 CSS。
下载

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

赞助

Route Planner and Route Optimizer

Modal

一个经典的 modal 覆盖层，您可以在其中包含任何您想要的内容

模态结构非常简单

  • modal：主容器
    • modal-background：一个透明的覆盖层，可以作为点击目标来关闭模态框
    • modal-content：一个水平和垂直居中的容器，最大宽度为 640px，您可以在其中包含任何内容
    • modal-close：位于右上角的一个简单的叉号

<div class="modal">
  <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>

要激活模态框，只需在 .modal 容器上添加 is-active 修饰符。 您可能还想将 is-clipped 修饰符添加到包含元素（通常是 html）以停止滚动溢出。

JavaScript 实现示例
Bulma 不包含任何 JavaScript。 但是，本文档提供了一个 JS 实现示例，您可以免费使用。

图片模态框 #

因为模态框可以包含 任何您想要的东西，所以您可以非常简单地使用它来构建一个图片库，例如

启动图片模态框 

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <p class="image is-4by3">
      <img src="https://bulma.org.cn/assets/images/placeholders/1280x960.png" alt="">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

卡片模态框 #

如果您想要一个更经典的模态框，具有头部、主体和尾部，请使用 modal-card。

<div class="modal">
  <div class="modal-background"></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">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <div class="buttons">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </div>
    </footer>
  </div>
</div>

JavaScript 实现示例 #

Bulma 包不附带任何 JavaScript。 这是一个实现示例，它使用原生 JavaScript 为自定义元素设置 click 处理程序。

此实现包含 3 个部分

  • 为 modal 添加 HTML（默认情况下此 modal 是隐藏的）
  • 为按钮添加 HTML 以触发 modal（您可以根据需要设置此按钮的样式）
  • 添加 JS 代码以在 trigger 上添加 click 事件以打开 modal

1. 添加 modal 的 HTML

在页面末尾，在结束 </body> 标记之前，添加以下 HTML 片段

<div id="modal-js-example" class="modal">
  <div class="modal-background"></div>

  <div class="modal-content">
    <div class="box">
      <p>Modal JS example</p>
      <!-- Your content -->
    </div>
  </div>

  <button class="modal-close is-large" aria-label="close"></button>
</div>

id 属性的值必须是唯一的。

2. 添加 trigger 的 HTML

在页面上的某个位置，添加以下 HTML 按钮

<button class="js-modal-trigger" data-target="modal-js-example">
  Open JS example modal
</button>

您可以根据需要设置其样式，只要它具有 js-modal-trigger CSS 类和适当的 data-target 值即可。 例如，您可以添加 button is-primary Bulma 类

3. 为 trigger 添加 JS

在 script 元素中（或在单独的 .js 文件中），添加以下 JS 代码

document.addEventListener('DOMContentLoaded', () => {
  // Functions to open and close a modal
  function openModal($el) {
    $el.classList.add('is-active');
  }

  function closeModal($el) {
    $el.classList.remove('is-active');
  }

  function closeAllModals() {
    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
      closeModal($modal);
    });
  }

  // Add a click event on buttons to open a specific modal
  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
    const modal = $trigger.dataset.target;
    const $target = document.getElementById(modal);

    $trigger.addEventListener('click', () => {
      openModal($target);
    });
  });

  // Add a click event on various child elements to close the parent modal
  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
    const $target = $close.closest('.modal');

    $close.addEventListener('click', () => {
      closeModal($target);
    });
  });

  // Add a keyboard event to close all modals
  document.addEventListener('keydown', (event) => {
    if(event.key === "Escape") {
      closeAllModals();
    }
  });
});

只要您可以切换 modal 元素上的 is-active 修饰符类，就可以选择如何实现它。

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
值
 
$modal-z
 
var(--bulma-modal-z)
 
40
 
$modal-background-background-color
 
var(--bulma-modal-background-background-color)
 
hsla(
  var(--bulma-scheme-h),
  var(--bulma-scheme-s),
  var(--bulma-scheme-invert-l),
  0.86
)
 
$modal-content-width
 
var(--bulma-modal-content-width)
 
40rem
 
$modal-content-margin-mobile
 
var(--bulma-modal-content-margin-mobile)
 
1.25rem
 
$modal-content-spacing-mobile
 
var(--bulma-modal-content-spacing-mobile)
 
10rem
 
$modal-content-spacing-tablet
 
var(--bulma-modal-content-spacing-tablet)
 
2.5rem
 
$modal-close-dimensions
 
var(--bulma-modal-close-dimensions)
 
2.5rem
 
$modal-close-right
 
var(--bulma-modal-close-right)
 
1.25rem
 
$modal-close-top
 
var(--bulma-modal-close-top)
 
1.25rem
 
$modal-card-spacing
 
var(--bulma-modal-card-spacing)
 
2.5rem
 
$modal-card-head-background-color
 
var(--bulma-modal-card-head-background-color)
 
var(--bulma-scheme-main)
 
$modal-card-head-padding
 
var(--bulma-modal-card-head-padding)
 
2rem
 
$modal-card-head-radius
 
var(--bulma-modal-card-head-radius)
 
var(--bulma-radius-large)
 
$modal-card-title-color
 
var(--bulma-modal-card-title-color)
 
var(--bulma-text-strong)
 
$modal-card-title-line-height
 
var(--bulma-modal-card-title-line-height)
 
1
 
$modal-card-title-size
 
var(--bulma-modal-card-title-size)
 
var(--bulma-size-4)
 
$modal-card-foot-background-color
 
var(--bulma-modal-card-foot-background-color)
 
var(--bulma-scheme-main-bis)
 
$modal-card-foot-radius
 
var(--bulma-modal-card-foot-radius)
 
var(--bulma-radius-large)
 
$modal-card-body-background-color
 
var(--bulma-modal-card-body-background-color)
 
var(--bulma-scheme-main)
 
$modal-card-body-padding
 
var(--bulma-modal-card-body-padding)
 
2rem

如何支持 Bulma

一次性捐赠

通过以下方式进行浏览器测试

访问我们的赞助商

每月捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#
免费开始使用
免费开始使用