HTML CSS -在表格单元格中心像弹出一样缩放div

Question

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

<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弹出- 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>