HTML CSS - 在表格单元格中心缩放div，如弹出窗口

Question

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

Answer 1

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>