锚点（Anchor）实现失效问题排查求助

你碰到的问题确实是单页路由的哈希（#/main）和弹窗锚点冲突导致的——浏览器只会识别URL中第一个#后面的内容，点击<a href="#popup1">会直接把原URL的哈希替换成#popup1，既破坏了单页路由，又可能因为路由监听哈希变化触发页面跳转，导致弹窗的:target选择器完全失效。

方案一：用JS替代CSS :target（推荐） #

完全脱离URL哈希控制，通过类名切换实现弹窗显示，彻底避免和路由冲突：

修改CSS #

把原来的:target选择器换成.active类：

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 3;
}

.overlay.active {
  visibility: visible;
  opacity: 1;
}

修改HTML并添加JS #

给触发按钮、关闭按钮绑定点击事件，控制弹窗的显示/隐藏：

<div>
  <div>
    <a id="copyTagsToSEO" href="javascript:void(0)">Copy to keywords</a>
  </div>
  
  <div id="popup1" class="overlay">
    <div class="popup">
      <a class="close" href="javascript:void(0)">×</a>
      <iframe id="cnx_frame" style="border: none" src="https://elements.connatix.com/extension?h={&quot;library&quot;:{&quot;mediaId&quot;:&quot;2afc6334-ecdc-4cdb-94da-c6ef7a4fce39&quot;,&quot;mediaIdList&quot;:null,&quot;playerId&quot;:&quot;42ff15a0-ee43-42a6-abfe-2b0957ed9e22&quot;},&quot;playlists&quot;:{&quot;mediaId&quot;:null,&quot;mediaIdList&quot;:[&quot;2c6d7e20-8b96-4ebf-b9eb-d89a72a5a10e&quot;,&quot;a072194d-4eb3-4238-855a-eb6e69352f03&quot;],&quot;playerId&quot;:&quot;8b034f64-513c-4987-b16f-42d6008f7feb&quot;}}"></iframe>
    </div>
  </div>
</div>

<script>
const triggerBtn = document.getElementById('copyTagsToSEO');
const overlay = document.getElementById('popup1');
const closeBtn = overlay.querySelector('.close');

// 打开弹窗
triggerBtn.addEventListener('click', () => {
  overlay.classList.add('active');
});

// 关闭弹窗
closeBtn.addEventListener('click', () => {
  overlay.classList.remove('active');
});

// 点击遮罩层关闭弹窗
overlay.addEventListener('click', (e) => {
  if(e.target === overlay) {
    overlay.classList.remove('active');
  }
});
</script>

方案二：兼容单页路由的锚点方案 #

如果一定要保留锚点逻辑，可以通过JS动态修改哈希，避免覆盖原路由：

修改CSS #

同样使用.active类（和方案一的CSS一致）

修改HTML和JS #

通过监听哈希变化来控制弹窗，同时保留原路由哈希：

<div>
  <div>
    <a id="copyTagsToSEO" href="javascript:void(0)">Copy to keywords</a>
  </div>
  
  <div id="popup1" class="overlay">
    <div class="popup">
      <a class="close" href="javascript:void(0)">×</a>
      <iframe id="cnx_frame" style="border: none" src="https://elements.connatix.com/extension?h={&quot;library&quot;:{&quot;mediaId&quot;:&quot;2afc6334-ecdc-4cdb-94da-c6ef7a4fce39&quot;,&quot;mediaIdList&quot;:null,&quot;playerId&quot;:&quot;42ff15a0-ee43-42a6-abfe-2b0957ed9e22&quot;},&quot;playlists&quot;:{&quot;mediaId&quot;:null,&quot;mediaIdList&quot;:[&quot;2c6d7e20-8b96-4ebf-b9eb-d89a72a5a10e&quot;,&quot;a072194d-4eb3-4238-855a-eb6e69352f03&quot;],&quot;playerId&quot;:&quot;8b034f64-513c-4987-b16f-42d6008f7feb&quot;}}"></iframe>
    </div>
  </div>
</div>

<script>
const triggerBtn = document.getElementById('copyTagsToSEO');
const overlay = document.getElementById('popup1');
const closeBtn = overlay.querySelector('.close');

// 点击按钮时，在现有路由哈希后追加弹窗标识
triggerBtn.addEventListener('click', () => {
  const currentRouteHash = window.location.hash.slice(1); // 去掉开头的#
  window.location.hash = `${currentRouteHash}#popup1`;
});

// 监听哈希变化，判断是否包含弹窗标识来控制显示
window.addEventListener('hashchange', () => {
  if (window.location.hash.includes('#popup1')) {
    overlay.classList.add('active');
  } else {
    overlay.classList.remove('active');
  }
});

// 关闭弹窗时，移除哈希中的弹窗标识，恢复原路由
closeBtn.addEventListener('click', () => {
  const updatedHash = window.location.hash.replace('#popup1', '');
  window.location.hash = updatedHash;
});
</script>

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