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

Posted 2023-03-05

【中文标题】HTML CSS - 在表格单元格中心缩放 div，如弹出窗口

【英文标题】：HTML CSS -zooming div in center of table cell like popup

【发布时间】：2021-12-15 04:40:09

【问题描述】：

我正在使用 Angular。在表格单元格中，我使用的是 div，但我需要在点击事件中像弹出窗口一样显示 div。我让它点击事件逻辑，但如何显示 div 元素，如放置在表格单元格之间的弹出窗口，而不使用任何库，如 bootsrap 或角度材料

 <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

【问题讨论】：

是的，只需在 CSS 中做出一定的努力，使用fixed，然后使用flex 或其他东西居中的容器就可以了

【参考方案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>