表单元格中心的HTML CSS -zooming div，如弹出窗口

Question

我使用的是Angular。在表格单元格中，我使用div，但我需要像单击事件中的弹出窗口一样显示div。我让它点击事件逻辑，但是如何显示div元素，比如放在表格单元格之间的弹出窗口，而不使用任何库，如bootsrap或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部分

divbox(data){
     data.box = true

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

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

我需要这个div喜欢在页面的中心弹出，这是可能的

来自互联网的样本图像

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

Answer 1

使用flex居中显示的简单弹出窗口。

您可以通过单击定义的按钮来触发它，以使用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>

​