Bulma 模态 JavaScript 实现示例(1)

📌 相关文章

📜 Bulma 模态 JavaScript 实现示例(1)

📅 最后修改于: 2023-12-03 14:39:36.419000 🧑 作者: Mango

Bulma 模态 JavaScript 实现示例

Bulma 是一款基于 Flexbox 的现代 CSS 框架，它提供了丰富的样式和组件，可以使我们快速地构建漂亮的界面。其中，它的模态框组件也非常实用，本文将介绍如何使用 Bulma 和 JavaScript 实现模态框，并附上示例代码。

实现思路

Bulma 的模态框组件是基于原生的 HTML 和 CSS 实现的，它通过添加 is-active 类来控制模态框的显示和隐藏，我们只需要监听相应的事件来实现模态框的显示和隐藏即可。

具体来说，我们可以在页面中先定义好模态框的 HTML 结构，如下所示：

<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"></button>
    </header>
    <section class="modal-card-body">
      <p>Modal body</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

上述 HTML 结构中，.modal 表示模态框的容器，.modal-background 用来显示背景遮罩，.modal-card 表示模态框的主体，.modal-card-head 和 .modal-card-foot 分别表示模态框的头部和底部，.modal-card-title 则用来显示标题，.modal-card-body 则用来显示内容，.delete 和 .button 则用来实现关闭模态框和按钮的功能。

然后，我们可以在 JavaScript 中添加相应的事件监听函数，如下所示：

// 获取模态框和关闭按钮的 DOM 对象
const modal = document.querySelector('.modal');
const closeButton = document.querySelector('.delete');

// 监听打开模态框的按钮的点击事件
document.querySelector('#openModalButton').addEventListener('click', () => {
  modal.classList.add('is-active');
});

// 监听关闭模态框的按钮的点击事件
closeButton.addEventListener('click', () => {
  modal.classList.remove('is-active');
});

// 监听点击背景遮罩的事件
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.remove('is-active');
  }
});

上述代码中，我们首先通过 document.querySelector 方法获取模态框和关闭按钮的 DOM 对象。然后，在打开模态框的按钮上添加了一个 click 事件监听函数，该函数在按钮被点击时给模态框的容器添加 is-active 类，以显示模态框。在关闭按钮上也添加了一个 click 事件监听函数，该函数在关闭按钮被点击时将模态框的容器移除 is-active 类，以隐藏模态框。最后，我们监听了模态框容器的 click 事件，当用户点击背景遮罩时移除 is-active 类，以隐藏模态框。

示例代码

完整的示例代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bulma Modal Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
</head>
<body>

  <button id="openModalButton" class="button is-primary">Open Modal</button>

  <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"></button>
      </header>
      <section class="modal-card-body">
        <p>Modal body</p>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>

  <script>
    const modal = document.querySelector('.modal');
    const closeButton = document.querySelector('.delete');

    document.querySelector('#openModalButton').addEventListener('click', () => {
      modal.classList.add('is-active');
    });

    closeButton.addEventListener('click', () => {
      modal.classList.remove('is-active');
    });

    modal.addEventListener('click', (event) => {
      if (event.target === modal) {
        modal.classList.remove('is-active');
      }
    });
  </script>
</body>
</html>

markdown 代码如下：

# Bulma 模态 JavaScript 实现示例

Bulma 是一款基于 Flexbox 的现代 CSS 框架，它提供了丰富的样式和组件，可以使我们快速地构建漂亮的界面。其中，它的模态框组件也非常实用，本文将介绍如何使用 Bulma 和 JavaScript 实现模态框，并附上示例代码。

## 实现思路

Bulma 的模态框组件是基于原生的 HTML 和 CSS 实现的，它通过添加 is-active 类来控制模态框的显示和隐藏，我们只需要监听相应的事件来实现模态框的显示和隐藏即可。

具体来说，我们可以在页面中先定义好模态框的 HTML 结构，如下所示：

```html
<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"></button>
    </header>
    <section class="modal-card-body">
      <p>Modal body</p>
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

然后，我们可以在 JavaScript 中添加相应的事件监听函数，如下所示：

// 获取模态框和关闭按钮的 DOM 对象
const modal = document.querySelector('.modal');
const closeButton = document.querySelector('.delete');

// 监听打开模态框的按钮的点击事件
document.querySelector('#openModalButton').addEventListener('click', () => {
  modal.classList.add('is-active');
});

// 监听关闭模态框的按钮的点击事件
closeButton.addEventListener('click', () => {
  modal.classList.remove('is-active');
});

// 监听点击背景遮罩的事件
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.remove('is-active');
  }
});

示例代码

完整的示例代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bulma Modal Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
</head>
<body>

  <button id="openModalButton" class="button is-primary">Open Modal</button>

  <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"></button>
      </header>
      <section class="modal-card-body">
        <p>Modal body</p>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>

  <script>
    const modal = document.querySelector('.modal');
    const closeButton = document.querySelector('.delete');

    document.querySelector('#openModalButton').addEventListener('click', () => {
      modal.classList.add('is-active');
    });

    closeButton.addEventListener('click', () => {
      modal.classList.remove('is-active');
    });

    modal.addEventListener('click', (event) => {
      if (event.target === modal) {
        modal.classList.remove('is-active');
      }
    });
  </script>
</body>
</html>