<div class="container">
<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td class="id">12 жми</td>
    <td>Name</td>
  </tr>
  <tr>
    <td class="id">13 жми</td>
    <td>Name</td>
  </tr>
  <tr>
    <td class="id">14 жми</td>
    <td>Name</td>
  </tr>
</table>
</div>

   <div class="popup">
      <a href="#">Просто ссылка</a>
      <span class="close">Close</span>
    </div>
.popup {
  display: none;  
        position: fixed;
        width: 50%;
        height: 50%;
        top: 25%;
        left: 25%;
        z-index: 99;
        background-color: rgba(108, 108, 108, 0.9); 
  a {
    color: #fff;
  }
}

View Compiled
 const table = document.querySelector('.table');
      const tableId = table.querySelectorAll('.id');
      const popup = document.querySelector('.popup');
      const popupHref = popup.querySelector('a');
      const btnClose = popup.querySelector('.close');

      btnClose.addEventListener('click', function(){
        popup.style.display = 'none';
      });

      tableId.forEach(function(e){
        e.addEventListener('click', function(){
          let idClick = e.innerHTML;
          popup.style.display = 'block';
          popupHref.innerHTML = `Твой id - ${idClick}`;     
          popupHref.setAttribute('href', `www.site.com\\id=${idClick}`);
        });
      });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.