I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as Bootstrap or Angular Material.
<table>
<tr>
<th>Name </tr>
<th>Age </th>
<th>Details </th>
<th> Blood Group</th>
<th> Phone </th>
</tr>
<tr *ngFor= " let details of DetailsList; index as i" >
<td> {{i + 1}} <td>
<td> {{details.name }} <td>
<td> {{details.age}} <td>
<td> <button (click)="divbox(details)" > </button>
<div *ngIf="details.box" class="boxelement">
<button (click)="close(details)" > close</button>
Address
No: {{details.address.no}}
Area: {{details.address.area}}
Pincode: {{details.address.pincode}}
</div>
<td>
<td> {{details.bloodgroup}} <td>
<td> {{details.phone}} <td>
</tr>
</table
ts part
divbox(data){
data.box = true
}
close(data){
data.box = false
}
css part
.boxelement{
background: white;
border-radius: 2px;
display: inline-box;
height: 700px;
margin: 1rem;
position: relative;
width: 70%;
box-shadow: 0 19px 38px rgba(0,0,0,0.30)
}
I am looking for a way to center the popup div on the page similar to the design shown in the sample image: