下载

从这里开始

特性

Sass 工具

定制

CSS 库

CSS 辅助工具

赞助商

Password.link

模态框

一个经典的模态框覆盖层，你可以在其中包含任何你想要的内容

模态框结构非常简单

  • 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 修饰符。你还可以向包含元素（通常是 html）添加 is-clipped 修饰符来停止滚动溢出。

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 部分

  • 为模态框添加 HTML（此模态框默认隐藏）
  • 为按钮添加 HTML 以触发模态框（你可以根据需要设置此按钮的样式）
  • 添加 JS 代码以在触发器上添加 click 事件以打开模态框

1. 为模态框添加 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. 为触发器添加 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. 为触发器添加 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
 
$modal-breakpoint
 
var(--bulma-)
 
iv.$tablet

如何支持 Bulma

一次性捐赠

访问我们的赞助商

每月捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#