How to display element ID in URL?

Question

JavaScript

Good afternoon, such a question.
There is a landing page with an area with promotions (news list component). The stock area is wrapped in the id "spec".
When you click on a promotion, a modal pops up.

function initPopupActions(){ 
  $('#spec .spec-wrap ul.spec-list li.spec-item').click(function(event){
    event.preventDefault();
    var html = $(this).find('.spec-popup').html();
    $('#spec-popup').show().append(html);
    var width = $('#spec-popup').outerWidth()/2;
    var height = $('#spec-popup').outerHeight()/2;
    $('#spec-popup').css('margin-left', "-"+width+"px");
    $('#spec-popup').css('margin-top', "-"+height+"px");
    $('#spec-overlay').addClass('popup-active');
    $('#spec-overlay.popup-active, #spec-popup .pp-close').click(function(){
      window.history.back();
      $('#spec-overlay').removeClass('popup-active');
      $('#spec-popup .pp-wrapp').remove();
      $('#spec-popup').hide();
    });
  });
}

at the same time, the page url does not change and looks like domain.ru.
I need each popup to have its own link, when you click on it, the landing page opens on the desired area with an already open modal window. In fact, I need a url like domain.ru/#spec/ELEMENT_ID.

How can this be implemented?

Answer 1

Duplicate the answer from the discussion

Everything after # is not passed to the webserver, resolve it via JS on the document.ready event (document.location.hash - here it is). And in php - you can display the ID of the desired news through $arItem['ID'], or whatever you have iterated