个人中心
gpt4 book ai didi

css - Bulma - 下拉列表位于模态卡体后面

转载 作者：行者123 更新时间：2023-12-04 14:51:57 31 4
gpt4 key购买 nike

我意识到嵌入模态卡体中的 Bulma 下拉菜单会被模态体覆盖，因此这会导致 UX 问题，如果下拉菜单高于卡体本身，用户必须向下滚动或移动鼠标光标向下移动滚动条，对此合适的 CSS 修复是什么？即让下拉菜单出现在顶层(我增加了 ddl 的 z-index 但运气不好，请注意:我确实需要 overflow-y : scroll 或 auto 模态卡片正文部分。enter image description here 

<!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>

此记录有一个 Unresolved Bulma 问题:https://github.com/jgthms/bulma/issues/936

我在上面的代码笔示例中添加了评论: https://codepen.io/wayneye/pen/ZEyQzOx

最佳答案

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

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"));
}

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

关于css - Bulma - 下拉列表位于模态卡体后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68932679/

31 4 0
文章推荐： react-native - 如何制作可滚动的顶部选项卡导航器(React Navigation v6)
文章推荐： .net - 转换为 .NET 4 后 ClickOnce 升级失败
文章推荐： Powershell 比较对象格式输出
文章推荐： javascript - 在 D3 中应用包装功能后，文本刷新到初始状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com