Skip to content

HTML CSS -zooming div in center of table cell like popup

I am using Angular. In table cell I am using div but I need to show the div like a popup in click event. I made it click event logics but how to show div element like a popup which is placed in between a table cell without using any library like bootsrap or angular material

       <th>Name </tr>
       <th>Age </th>
       <th>Details </th>
       <th> Blood Group</th>
       <th> Phone </th>

     <tr *ngFor= " let details of DetailsList; index as i" >
           <td> {{i + 1}}    <td>
           <td> {{ }}    <td>
           <td> {{details.age}}    <td>
           <td> <button (click)="divbox(details)"  > </button> 
           <div *ngIf="" class="boxelement">
                      <button (click)="close(details)" > close</button>

               No:        {{}}
               Area:      {{details.address.area}}
               Pincode:   {{details.address.pincode}}   
           <td> {{details.bloodgroup}}    <td>
           <td> {{}}    <td>


ts part

divbox(data){ = true

close(data){ = false

css part

      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 need to this div like a popup in the center of the page is that possible

sample image from internet


A simple pop-up which is centered using flex.

You can trigger it by click of button defined to show it and close it using display: none.

function func(){
  document.getElementById('container').style.display = "flex";

function funcClose(){
  document.getElementById('container').style.display = "none";
#container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: none;
    background-color: rgba(126, 125, 125, 0.5);

#popUP {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  background-color: rgb(255, 197, 197);
  margin: auto;
  position: relative;

#popUP button {
  position: absolute;
<button onclick="func()">Pop me UP</button>

<div id="container">
  <div id="popUP">My first Pop UP <button onclick="funcClose()">X</button>