使用JS为按钮点击事件应用CSS：解决全屏Modal弹出后Header遮挡问题

嘿，这个问题很常见——Modal全屏弹出后Header还飘在上面，本质就是z-index层级的冲突，咱们用JS动态调整Header的层级就能搞定！下面分两种情况给你具体方案：

方案一：基于Bootstrap Modal事件（推荐） #

看你的触发链接用了data-toggle="modal"，应该是用的Bootstrap Modal吧？那直接用它的内置事件最稳妥，不管是点击触发链接还是其他方式打开Modal，都能精准触发层级调整：

// 替换成你实际的Header选择器，比如#header或者.header-container
const siteHeader = document.querySelector('.site-header');
// 保存Header原本的z-index值，避免硬编码死数值
const originalHeaderZIndex = siteHeader.style.zIndex || window.getComputedStyle(siteHeader).zIndex;

// 监听Modal开始显示的事件
document.addEventListener('show.bs.modal', function() {
  // 给Header设置一个比Modal低的z-index（Bootstrap Modal默认z-index是1050，所以设100以下都可以）
  siteHeader.style.zIndex = '1';
});

// 监听Modal开始隐藏的事件
document.addEventListener('hide.bs.modal', function() {
  // 恢复Header原本的z-index值
  siteHeader.style.zIndex = originalHeaderZIndex;
});

方案二：原生JS手动监听（非Bootstrap场景） #

如果你的Modal是自定义的，那咱们直接监听触发链接和关闭按钮的点击事件：

// 获取需要操作的元素
const modalTriggers = document.querySelectorAll('.clickformodal');
const targetModal = document.getElementById('modal-our-work-1');
const modalCloseBtn = targetModal.querySelector('.close'); // 替换成你实际的关闭按钮选择器
const siteHeader = document.querySelector('.site-header'); // 替换成你的Header选择器
const originalHeaderZIndex = siteHeader.style.zIndex || window.getComputedStyle(siteHeader).zIndex;

// 给每个触发链接绑定点击事件
modalTriggers.forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转
    // 显示Modal（如果你的Modal是手动控制显示的话）
    targetModal.style.display = 'block';
    // 降低Header的层级，让Modal能覆盖它
    siteHeader.style.zIndex = '1';
  });
});

// 关闭按钮点击事件
modalCloseBtn.addEventListener('click', function() {
  targetModal.style.display = 'none';
  // 恢复Header的原始层级
  siteHeader.style.zIndex = originalHeaderZIndex;
});

// 可选：点击Modal背景关闭时也恢复层级
targetModal.addEventListener('click', function(e) {
  if (e.target === targetModal) {
    targetModal.style.display = 'none';
    siteHeader.style.zIndex = originalHeaderZIndex;
  }
});

注意事项 #

• 务必把代码里的.site-header、.close等选择器替换成你项目中实际的元素选择器
• 确保你的Modal的z-index值要高于设置给Header的z-index（比如Modal设为1000，Header设为1就没问题）
• 如果用Bootstrap，Modal默认z-index是1050，所以Header设为100以内都能被Modal覆盖

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