我有一个表，其数据来自循环，这里有一个“单击此处”链接，当您单击链接时，div 将以绝对位置打开，我想将此 div 制作为带有 css 的引导模式。如果可以使用 Bootstrap 就可以了。当您按下关闭按钮弹出窗口应该像 Bootstrap 一样关闭。这是下面的代码
https://stackblitz.com/edit/angular-xvwuqz
app.component.html
<table class="table border">
<thead>
<tr>
<ng-container *ngFor="let column of columns; let i = index">
<th>{{ column }}</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of groups;let i = index">
<td>{{row.name}}</td>
<td>{{row.items}}</td>
<td>{{row.Status.length}}-<span (click)="hideme[i] = true" style="border:1px solid;" >Click here</span>
<div style="position:absolute;top:10px;border:1px solid;padding:20px;position:absolute;background:#fff;" [hidden]="!hideme[i]"> <span *ngFor="let item of row.Status;let j = index">
{{item.name}}
<span *ngIf="j != row.Status.length - 1">,</span></span><span (click)="hideme[i] = false" style="position: absolute;
top: 0;
right: 0;cursor:pointer;">close</span></div>
</td>
<td>
<span *ngFor="let item of row.loc;let k = index">
{{item.name}}
<span *ngIf="k != row.loc.length - 1">,</span>
</span>
</td>
</tr>
</tbody>
</table>
应用程序组件.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
selectedRow : Number;
name = 'Angular';
selectedgroup: any;
hideme=[];
columns = ["name", "Items","status", "loc"];
groups=[{
"id": 1,
"name": "pencils",
"items": "red pencil",
"Status": [{
"id": 1,
"name": "green"
}, {
"id": 2,
"name": "red"
}, {
"id": 3,
"name": "yellow"
}],
"loc": [{
"id": 1,
"name": "loc 1"
}, {
"id": 2,
"name": "loc 2"
}, {
"id": 3,
"name": "loc 3"
}]
},
{
"id": 2,
"name": "rubbers",
"items": "big rubber",
"Status": [{
"name": "green"
}, {
"name": "red"
}],
"loc": [{
"name": "loc 2"
}, {
"name": "loc 3"
}]
},
{
"id": 3,
"name": "rubbers1",
"items": "big rubber1",
"Status": [{
"name": "green"
}, {
"name": "red"
}],
"loc": [{
"name": "loc 2"
}, {
"name": "loc 3"
}]
}
];
}
最佳答案
可以在以下位置测试代码:stackblitz
从 W3Schools 获得了一些代码，还添加了 2 个接受索引的 javascript 函数。代码是不言自明的。
app.component.html
<table class="table border">
<thead>
<tr>
<ng-container *ngFor="let column of columns; let i = index">
<th>{{ column }}</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of groups;let i = index">
<td>{{row.name}}</td>
<td>{{row.items}}</td>
<td>{{row.Status.length}}-<span (click)="displayBox(i)" style="border:1px solid;" >Click here</span>
<div class="modal" id="model_{{i}}" style="display:none;">
<div class="modal-content">
<span (click)="closeBox(i)" class="close">×</span>
<span *ngFor="let item of row.Status;let j = index">
{{item.name}}
<span *ngIf="j != row.Status.length - 1">,</span>
</span>
</div>
</div>
</td>
<td>
<span *ngFor="let item of row.loc;let k = index">
{{item.name}}
<span *ngIf="k != row.loc.length - 1">,</span>
</span>
</td>
</tr>
</tbody>
</table>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
selectedRow : Number;
name = 'Angular';
selectedgroup: any;
hideme=[];
columns = ["name", "Items","status", "loc"];
groups=[{
"id": 1,
"name": "pencils",
"items": "red pencil",
"Status": [{
"id": 1,
"name": "green"
}, {
"id": 2,
"name": "red"
}, {
"id": 3,
"name": "yellow"
}],
"loc": [{
"id": 1,
"name": "loc 1"
}, {
"id": 2,
"name": "loc 2"
}, {
"id": 3,
"name": "loc 3"
}]
},
{
"id": 2,
"name": "rubbers",
"items": "big rubber",
"Status": [{
"name": "green"
}, {
"name": "red"
}],
"loc": [{
"name": "loc 2"
}, {
"name": "loc 3"
}]
},
{
"id": 3,
"name": "rubbers1",
"items": "big rubber1",
"Status": [{
"name": "green"
}, {
"name": "red"
}],
"loc": [{
"name": "loc 2"
}, {
"name": "loc 3"
}]
}
];
displayBox(index:number):void{
var modal = document.getElementById("model_" + index);
modal.style.display = 'block';
}
closeBox(index:number):void{
var modal = document.getElementById("model_" + index);
modal.style.display = 'none';
}
}
app.component.css
p {
font-family: Lato;
}
/*
* Code from: https://www.w3schools.com/howto/howto_css_modals.asp
*/
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
祝你的元素好运。
关于html - 如何使用 css 制作一个像 bootstrap 弹出窗口一样的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57894824/