Removing modal anchor tag after exiting content modal

[DavidL]

Hi,

I’ve got an essential grid set up where each item links to an anchor tag that is attributed to different modal content depending on which ess grid item is clicked.

This works well, however I am left with the anchor tag after the URL after I exit the modal so I cannot click back into the same item after closing, plus it looks kind of clunky. Is there any way I can keep this functionality but but not have the #xyz in the URL after the modal has been opened or even removing it on closing the modal?

This solution was so close to solving my problem, but since it is the same element class name being triggered each time I can’t use this for more than 1 grid item: Properly remove anchor tag when closing modal content area

The page I am working on is: https://davesdesign.com.au/portfolio-v3/

You can see an example of the issue when you click on a portfolio item then exit, then try click back into the same item.

I appreciate your help!

Cheers,
David

[christian]

Hey David,

You will need to tweak the sample JS code provided in the other thread. We cannot tweak as it would be custom development and that is outside the scope of our theme support.

If you’re not sure how to tweak the code, please consider consulting with a 3rd party developer or use a different lightbox solution.

Thank you for understanding.

[DavidL]

Hi Christian,

Thanks for the response, completely understand. Just FYI in this instance I got it working by fiddling with the code and amending it to this:

let cover = document.querySelectorAll('.eg-invisiblebutton');
let link = document.querySelectorAll('.eg-invisiblebutton');

let linkButt = document.querySelectorAll('.eg-washington-element-0');

for(let i = 0; i < link.length; i++) {
let thisLink = link[i].getAttribute('href');
  

var hash = thisLink.split('#').pop();
  console.log(hash);

cover[i].classList.add(hash);
linkButt[i].classList.add(hash);
  
// ===========
  
  (function($) {
    var newSelect = document.querySelectorAll('.' + hash);
  var newHash = document.querySelectorAll('[data-x-toggle-hash=' + '"' + hash + '"' + ']');

  $(newSelect).on('click touchend', function(e) {
    e.preventDefault();
    $(newHash).click();
  }); 
})(jQuery);
}

// =====================

In case something like this might arise again.

Cheers,
David

[jade]

Glad to hear you got it sorted, David and thanks for sharing your solution.