如何实现带点击链接打开Modal弹窗功能的JavaScript横向滚动组件

1. 基础HTML结构 #

同时搭建横向滚动菜单容器、Modal弹窗容器两部分：

<!-- 横向滚动菜单 -->
<div class="scroll-menu">
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">关于</a>
  <a href="#support">支持</a>
  <a href="#blog">博客</a>
  <a href="#tools">工具</a>
  <a href="#base">基础</a>
</div>

<!-- Modal弹窗 -->
<div class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <p></p>
  </div>
</div>

2. 样式实现 #

2.1 横向滚动菜单样式 #

.scroll-menu {
  background-color: #333;
  overflow-x: auto;
  white-space: nowrap;
}
/* 可选：隐藏滚动条保持视觉整洁 */
.scroll-menu::-webkit-scrollbar {
  display: none;
}
.scroll-menu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
.scroll-menu a:hover {
  background-color: #777;
}

2.2 Modal弹窗样式 #

.modal {
  display: none; 
  position: fixed; 
  z-index: 999; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.4); 
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
  max-width: 500px;
  border-radius: 4px;
}
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close-btn:hover {
  color: #000;
}

3. 交互逻辑实现 #

// 获取DOM元素
const scrollLinks = document.querySelectorAll('.scroll-menu a');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close-btn');
const modalText = document.querySelector('.modal-content p');

// 菜单链接点击事件
scrollLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    // 阻止链接默认跳转行为
    e.preventDefault();
    // 可自定义填充Modal内容，此处示例获取点击的菜单文本
    modalText.textContent = `你点击了菜单：${link.textContent}`;
    // 显示Modal
    modal.style.display = "block";
  })
})

// 点击关闭按钮隐藏Modal
closeBtn.addEventListener('click', () => {
  modal.style.display = "none";
})

// 点击Modal背景区域也可关闭
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = "none";
  }
})

如果需要不同链接对应不同的Modal内容，可以给a标签添加自定义属性比如data-modal-info，点击时读取属性值填充到Modal即可。

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