js实现点table对应行用遮罩层居中竖向显示该行数据含标题

<table id="myTable">
<thead>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>X1 Y1</td>
<td>X1 Y2</td>
<td>X1 Y3</td>
</tr>
<tr>
<td>X2 Y1</td>
<td>X2 Y2</td>
<td>X2 Y3</td>
</tr>
<tr>
<td>X3 Y1</td>
<td>X3 Y2</td>
<td>X3 Y3</td>
</tr>
</tbody>
</table>
<div id="overlay"></div>
<div id="popover"></div>
<style>
table{border-left:1px solid #a2c6d3;border-top:3px solid #0180CF; margin:0 auto;width:97.5%;}
table td,th{border-right:1px solid #a2c6d3;border-bottom:1px solid #a2c6d3;padding:2px;}
#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1}
#popover{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ccc;background-color:#fff;z-index:2;padding:10px}
#popover table{width:100%;border-collapse:collapse}
#popover tr:nth-child(even){background-color:#f2f2f2}
#popover td{padding:5px;border:1px solid #ccc}
</style>
<script>
function $(objId){ return document.getElementById(objId); }

var table = $("myTable");
var row = table.getElementsByTagName("tr");
var col = row[0].getElementsByTagName("th");
var overlay = $("overlay");
var popover = $("popover");
for (var i = 1; i < row.length; i++) {
row[i].onclick = function() {
 var r = "";
 var tds = this.cells;
 for (var j = 0; j < col.length; j++) {
 r += "<tr><td>" + col[j].innerHTML + "</td><td>" + tds[j].innerHTML + "</td></tr>";
 }
popover.innerHTML = "<table>"+r+"</table>";
overlay.style.display = "block";
popover.style.display = "block";
var popoverWidth = popover.offsetWidth;
var popoverHeight = popover.offsetHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
popover.style.top = (scrollTop + window.innerHeight / 2) - popoverHeight / 2 + "px";
popover.style.left = "50%";
popover.style.marginLeft = -popoverWidth / 2 + "px";
};
}
overlay.onclick = function() {
overlay.style.display = "none";
popover.style.display = "none";
};

</script>