Why my anchors implementation is not working?

Question

This is the url I'm working with

https://example.com/#/main?name=Denzel%20and%20Dakota%20Reunite!%20Here%E2%80%99s%20Everything%20You%20Need%20To%20Know%20About%20%E2%80%98The%20Equalizer%203%E2%80%99&uri=https:%2F%2Fqa1-cue-webservice.misitemgr.com%2Fwebservice%2Fescenic%2Fcontent%2F24907540&mimetype=x-ece%2Fstory

This is the code:

.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:target {
  visibility: visible;
  opacity: 1;
}

<div>
  <div>
    <a id="copyTagsToSEO" href="#popup1">Copy to keywords</a>
  </div>
  
  <div id="popup1" class="overlay">
    <div class="popup">
      <a class="close" href="#">×</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>

No sure if the issue is related with the "#" present in the url: https://example.com/#/main? ...

When I click on the link, I'm been redirected to https://example.com/#popup1

Just to try, I manually change the url adding the anchor but no results:

https://example.com/#/main?name=Denzel%20and%20Dakota%20Reunite!%20Here%E2%80%99s%20Everything%20You%20Need%20To%20Know%20About%20%E2%80%98The%20Equalizer%203%E2%80%99&uri=https:%2F%2Fqa1-cue-webservice.misitemgr.com%2Fwebservice%2Fescenic%2Fcontent%2F24907540&mimetype=x-ece%2Fstory#popup1

Any advice or alternative to anchors links ?