Bulma：将模态对齐到右侧[关闭]

Question

我正在尝试将我的模态向右对齐（就像这里的这个问题：align Modal on the right side in Bootstrap 4），但使用 Bulma 并覆盖该答案中的 modal 类不起作用。

我尝试添加一些随机的 flexbox 助手（我真的不是在这里做什么......）但这似乎也没有什么不同。有人可以告诉我如何使用 Bulma 将模态对齐到右侧吗？

谢谢！

编辑：我创建了一个 jsfiddle here。

Answer 1

您可以通过重写 #modal.modal 和 #modal .modal-card 样式来实现此目的。并将样式 modal-card 更改为类似于 this。

style.css

#modal.modal {
  align-items: start;
  flex-direction: row;
  justify-content: end;
}
#modal .modal-card {
  max-height: 100%;
  min-height: 100%;
  width: 300px;
  margin-right: 0;
}
@media screen and (min-width: 769px) {
  #modal .modal-card {
    margin-right: 0;
  }
}

var open = document.querySelector('.open-modal');
var modal = document.querySelector('#modal');
var close = document.querySelector('#close');
open.addEventListener('click', function() {
  modal.classList.add('is-active');
});
close.addEventListener('click', function() {
  modal.classList.remove('is-active');
});

#modal.modal {
  align-items: start;
  flex-direction: row;
  justify-content: end;
}
#modal .modal-card {
  max-height: 100%;
  min-height: 100%;
  width: 300px;
  margin-right: 0;
}
@media screen and (min-width: 769px) {
  #modal .modal-card {
    margin-right: 0;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<section class="section">
  <div class="columns">
    <div class="column is-4-tablet is-3-desktop is-2-widescreen"></div>

    <div class="column">
      <h1 class="title">Customers</h1>

      <!-- modal content -->

      <div id="modal" 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 id="close" class="delete" aria-label="close"></button>
          </header>
          <section class="modal-card-body">
            <p class="title">
              Modal content here but would like this to be right aligned.. something that looks like a right panel
            </p>
          </section>
          <footer class="modal-card-foot">
            <button class="button is-success">Save changes</button>
            <button class="button">Cancel</button>
          </footer>
        </div>
      </div>

      <nav class="level">
        <div class="level-left">
          <p class="level-item">
            <button class="open-modal button is-success">Open Modal</button>
          </p>
        </div>
      </nav>

      <table class="table is-hoverable is-fullwidth">
        <thead>
          <tr>
            <th class="is-narrow">
              <input type="checkbox" />
            </th>
            <th>Name</th>
            <th>Email</th>
            <th>Country</th>
            <th>Orders</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>
              <a href="edit-customer.html">
                <strong>John Miller</strong>
              </a>
            </td>
            <td><code>johnmiller@gmail.com</code></td>
            <td>United States</td>
            <td>
              <a href="customer-orders.html">7</a>
            </td>
            <td>
              <div class="buttons">
                <a class="button is-small" href="edit-customer.html">Edit</a
                    >
                    <a class="button is-small">Delete</a>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>
              <a href="edit-customer.html"><strong>Samantha Rogers</strong></a
                  >
                </td>
                <td><code>samrogers@gmail.com</code></td>
                <td>United Kingdom</td>
                <td>
                  <a href="customer-orders.html">5</a>
            </td>
            <td>
              <div class="buttons">
                <a class="button is-small" href="edit-customer.html">Edit</a
                    >
                    <a class="button is-small">Delete</a>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>
              <a href="edit-customer.html"><strong>Paul Jacques</strong></a>
            </td>
            <td><code>paul.jacques@gmail.com</code></td>
            <td>Canada</td>
            <td>
              <a href="customer-orders.html">2</a>
            </td>
            <td>
              <div class="buttons">
                <a class="button is-small" href="edit-customer.html">Edit</a
                    >
                    <a class="button is-small">Delete</a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>