Estoy usando Angular. En la celda de la tabla, estoy usando div, pero necesito mostrar el div como una ventana emergente en un evento de clic. Hice clic en la lógica de eventos, pero cómo mostrar el elemento div como una ventana emergente que se coloca entre una celda de la tabla sin usar ninguna biblioteca como bootsrap o material angular

 <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 parte

 divbox(data){ data.box = true } close(data){ data.box = false }

parte css

 .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) }

Necesito este div como una ventana emergente en el centro de la página, ¿es posible?

imagen de muestra de internet

https://wisepops.com/wp-content/uploads/2017/12/Nike-popup-1.png