如何为现有HTML/CSS页面实现点击us弹出导航模态框的功能

1. 调整HTML结构 #

在原有代码基础上新增模态框容器，同时给「us」元素添加触发标识，修改后完整HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/src/styles/pages/menu2.css">
    <title>menu</title>
</head>
<body>
    <div class="container">
        <div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div>
        <!-- 给us元素添加触发类 -->
        <div class="right us-trigger">us</div>
    </div>

    <!-- 新增模态框结构 -->
    <div id="usModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>导航</h2>
            <div class="nav-links">
                <a href="/about">关于我们</a>
                <a href="/contact">联系方式</a>
                <a href="/team">团队介绍</a>
                <!-- 可根据需求新增更多导航项 -->
            </div>
        </div>
    </div>
    <script>
        // 后续JS逻辑写在此处
    </script>
</body>
</html>

2. 新增/调整CSS样式 #

在原有CSS代码末尾添加以下样式，控制模态框的显示效果和交互样式：

/* 给us触发区域添加手型光标 */
.us-trigger {
  cursor: pointer;
}

/* 模态框基础样式：默认隐藏 */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}

/* 模态框内容区样式 */
.modal-content {
  background-color: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  min-width: 300px;
  text-align: center;
  position: relative;
  font-size: 24px;
  font-family: 'Times New Roman', Times, serif;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #000;
}

/* 模态框内导航链接样式 */
.nav-links {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.nav-links a:hover {
  color: #000;
  border-color: #000;
}

3. 添加交互JS逻辑 #

在HTML的script标签中添加以下代码，实现点击触发、关闭模态框的逻辑：

// 获取DOM元素
const usTrigger = document.querySelector('.us-trigger');
const modal = document.getElementById('usModal');
const closeBtn = document.querySelector('.close-btn');

// 点击us显示模态框
usTrigger.addEventListener('click', () => {
  modal.style.display = 'flex';
});

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

// 点击模态框遮罩区域隐藏模态框
modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

你可以根据自身需求调整模态框的样式、导航项的文本和链接地址，匹配网站的整体设计风格。

内容的提问来源于stack exchange，提问作者Tomás Aguiar