<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}`);
});
});
This Pen doesn't use any external JavaScript resources.