代码之家 › 专栏 › 技术社区 › Ecognium

Bulma:将模态向右对齐

bulma

0

Ecognium · 技术社区 · 3 年前

我试图将我的模态与右边对齐(比如下面的问题: align Modal on the right side in Bootstrap 4 )但是使用Bulma并覆盖 modal 这个答案的课堂效果不好。

我尝试添加一些随机的flexbox助手(我真的不知道我在这里做什么…)但这似乎也没有造成什么不同。有人能告诉我如何使用Bulma将模态与右侧对齐吗?

谢谢

编辑 :我创建了一个JSFIDLE here .

0 回复 | 直到 3 年前

1

3

Anton 3 年前

可以通过重写 #modal.modal 和 #modal .modal-card 风格。改变了风格 模态卡 相像 this .

风格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>