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