模态框（Modal）

传统的覆盖父窗体的模态框（modal）——其内您可以放置您想放的任何内容

模态框（Modal）结构非常简单：

  • modal：主容器
    • modal-background：一个可以做为关闭 modal 时点击目标的透明覆盖物
    • 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://docs.rubyist.cn/bulma/images/placeholders/1280x960.png" alt="">
    </p>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

模态卡片 #

如果您想要一个更传统的模态框——带有head、body 和 foot，可以使用 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">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

JavaScript 扩展示例 #

Bulma 包没有任何 JavaScript。这是扩展示例，该示例基于 vanilla JavaScript 为定制元素设置了 click 抓手。

该扩展有 3 部分：

  • 为 modal 添加 HTML（此 modal 默认隐藏）
  • 为 HTML 添加一个 button 做为 modal 的 trigger（您可以随意美化该 button）
  • 为 trigger 添加 JS 代码——添加 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. 添加 HTML 触发器（Trigger）

在您的页面的某处，添加下面的 HTML button： 

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

您可以如您所愿的美化一下它，只要不改动 js-modal-trigger CSS 类和合适的 data-target 值即可。例如您可以添加 button is-primary 类：

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) => {
    const e = event || window.event;

    if (e.keyCode === 27) { // Escape key
      closeAllModals();
    }
  });
});

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

Variables #

Name
Type
Value
Computed Value
Computed Type 
$modal-z
string
40
$modal-background-background-color
compound
bulmaRgba($scheme-invert, 0.86)
$modal-content-width
size
640px
$modal-content-margin-mobile
size
20px
$modal-content-spacing-mobile
size
160px
$modal-content-spacing-tablet
size
40px
$modal-close-dimensions
size
40px
$modal-close-right
size
20px
$modal-close-top
size
20px
$modal-card-spacing
size
40px
$modal-card-head-background-color
variable
$background
hsl(0, 0%, 96%)
color
$modal-card-head-border-bottom
size
1px solid $border
$modal-card-head-padding
size
20px
$modal-card-head-radius
variable
$radius-large
6px
size
$modal-card-title-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$modal-card-title-line-height
string
1
$modal-card-title-size
variable
$size-4
1.5rem
size
$modal-card-foot-radius
variable
$radius-large
6px
size
$modal-card-foot-border-top
size
1px solid $border
$modal-card-body-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$modal-card-body-padding
size
20px
$modal-breakpoint
variable
$tablet
769px
size

Made with Bulma 此页面为开放源码页面。 发现排版问题？或者表达模糊？
在 GitHub 改进该页内容

支持 Bulma 😃

一次性捐献

访问我们的赞助商

Stock APIs kasinohai casinoutanlicens

按月捐献

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

简讯 功能、版本、展柜……实时新闻滚动发布！