如何实现Bottom Sheet？咨询点击控件弹出小型选项弹窗的方案

下面是一个比参考图尺寸更小的弹窗实现方案，点击控件即可弹出包含操作选项和取消按钮的弹窗：

HTML 结构 #

<!-- 触发控件 -->
<button class="trigger-btn">点击打开弹窗</button>

<!-- 弹窗容器 -->
<div class="small-popup" id="actionPopup">
  <div class="popup-options">
    <p class="option-item">操作选项1</p>
    <p class="option-item">操作选项2</p>
    <p class="option-item">操作选项3</p>
  </div>
  <button class="cancel-btn" id="cancelBtn">取消</button>
</div>

CSS 样式 #

/* 触发按钮样式（可自定义） */
.trigger-btn {
  padding: 8px 16px;
  cursor: pointer;
}

/* 弹窗核心样式 */
.small-popup {
  width: 200px; /* 比参考图更小的宽度，可按需调整 */
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: absolute;
  display: none; /* 默认隐藏 */
  background: #fff;
}

.popup-options {
  padding: 8px 0;
}

.option-item {
  margin: 0;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.cancel-btn {
  width: 100%;
  border: none;
  border-top: 1px solid #ddd;
  padding: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}

JavaScript 交互 #

const triggerBtn = document.querySelector('.trigger-btn');
const actionPopup = document.getElementById('actionPopup');
const cancelBtn = document.getElementById('cancelBtn');

// 点击触发控件显示弹窗
triggerBtn.addEventListener('click', (e) => {
  // 弹窗定位到触发按钮下方
  const btnRect = e.target.getBoundingClientRect();
  actionPopup.style.left = `${btnRect.left}px`;
  actionPopup.style.top = `${btnRect.bottom + 8}px`;
  actionPopup.style.display = 'block';
});

// 点击取消按钮关闭弹窗
cancelBtn.addEventListener('click', () => {
  actionPopup.style.display = 'none';
});

// 点击弹窗外部关闭弹窗
document.addEventListener('click', (e) => {
  if (!actionPopup.contains(e.target) && e.target !== triggerBtn) {
    actionPopup.style.display = 'none';
  }
});

关键说明 #

• 弹窗宽度设为200px，可直接修改width值调整到你需要的大小
• 弹窗默认隐藏，点击触发按钮后会自动定位到按钮下方，位置逻辑可按需修改
• 操作选项和取消按钮都添加了hover反馈，贴合常规交互习惯
• 支持点击弹窗外部自动关闭，提升使用便捷性

内容的提问来源于stack exchange，提问作者Unknown