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

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

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

sample image from internet

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

CodePudding user response：

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;
  right:0;
  top:0;
}

<button onclick="func()">Pop me UP</button>

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