时间戳

首页 > 解决方案 > Bulma - 下拉菜单落后于模态卡体

css - Bulma - 下拉菜单落后于模态卡体

问题描述

我意识到嵌入在模态卡体中的 Bulma 下拉菜单被模态体覆盖，因此这会导致 UX 问题，如果下拉菜单高于其自身的卡体，则用户必须向下滚动或移动鼠标光标并向下移动滚动条，什么是适当的 CSS 修复？即让下拉菜单出现在顶层（我增加了z-indexddl 但没有运气，请注意：我确实需要模态卡体部分的overflow-y: scrollor auto。在此处输入图像描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
  <div id="modal-ter" class="modal is-active">
    <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" style="height: 188px">
        <div class="dropdown is-active">
          <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
              <span>Click me</span>
              <span class="icon is-small">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </button>
          </div>
          <div class="dropdown-menu" id="dropdown-menu3" role="menu">
            <div class="dropdown-content">
              <a href="#" class="dropdown-item">
                Overview
              </a>
              <a href="#" class="dropdown-item">
                Modifiers
              </a>
              <a href="#" class="dropdown-item">
                Grid
              </a>
              <a href="#" class="dropdown-item">
                Form
              </a>
              <a href="#" class="dropdown-item">
                Elements
              </a>
              <a href="#" class="dropdown-item">
                Components
              </a>
              <a href="#" class="dropdown-item">
                Layout
              </a>
              <hr class="dropdown-divider">
              <a href="#" class="dropdown-item">
                More
              </a>
            </div>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>
    <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>
</html>

有一个公开的布尔玛问题记录在：https ://github.com/jgthms/bulma/issues/936

我使用 codepen 示例对上述问题添加了评论： https ://codepen.io/wayneye/pen/ZEyQzOx

标签： cssweb-frontendbulma

解决方案

问题在于当下拉菜单打开并且用户开始滚动时您期望的行为。下拉菜单应该改变位置吗？当带有“单击我”的下拉按钮不再可见时会发生什么，因为用户将其滚动到视线之外。如果下拉菜单也应该改变位置，那么你会遇到奇怪的情况。所以我做了这个例子来说明如何通过在用户滚动时隐藏下拉菜单来解决这个问题。

function contentScroll() {
  document.querySelector(".dropdown-menu").style.display = "none";
}

function clickMe(button) {
  const rectObject = button.getBoundingClientRect();
  const marginBelowButton = 2;
  const dropdownContent = document.querySelector(".dropdown-menu");
  dropdownContent.style.display = "block";
  dropdownContent.style.top = rectObject.top + marginBelowButton + rectObject.height + "px";
  dropdownContent.style.left = rectObject.left + "px";
}
.dropdown-menu {
  position: fixed !important;
  z-index: 20;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>

<body>
  <div id="modal-ter" class="modal is-active">
    <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" style="height: 188px" onscroll='contentScroll()'>
        <div class="dropdown is-active">
          <div class="dropdown-trigger">
            <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3" onclick="clickMe(this)">
              <span>Click me</span>
              <span class="icon is-small">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </button>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
          </div>
          <div class="dropdown-menu" id="dropdown-menu3" role="menu">
            <div class="dropdown-content">
              <a href="#" class="dropdown-item">
                Overview
              </a>
              <a href="#" class="dropdown-item">
                Modifiers
              </a>
              <a href="#" class="dropdown-item">
                Grid
              </a>
              <a href="#" class="dropdown-item">
                Form
              </a>
              <a href="#" class="dropdown-item">
                Elements
              </a>
              <a href="#" class="dropdown-item">
                Components
              </a>
              <a href="#" class="dropdown-item">
                Layout
              </a>
              <hr class="dropdown-divider">
              <a href="#" class="dropdown-item">
                More
              </a>
            </div>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>
  <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>

</html>

如果您不想在滚动时隐藏下拉菜单，您还可以通过将函数 contentScroll() 更改为此来更新位置，使其跟随按钮：

function contentScroll() {
  clickMe(document.querySelector(".button"));
}

但就像我说的那样，这会出现奇怪的情况

推荐阅读