html - 如何使用 Angular 中的 css 制作一个类似于引导弹出窗口的 div
问题描述
我有一个表,其数据来自循环,当您单击链接时,这里有一个“单击此处”链接,一个 div 将以绝对位置打开,这个 div 我想用 css 制作引导模式。如果引导程序没问题,那就没问题了。当您按下关闭按钮时,弹出窗口应该像引导程序一样关闭。这是下面的代码
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>
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"
}]
}
];
}
解决方案
可以测试代码: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;
}
祝你的项目好运。
推荐阅读
- c++ - C++ 中 extern "C" 与 extern "C" { } 的不同链接
- javascript - Firebase - 网络 - 在没有可用电子邮件的情况下验证帐户
- docker - .NET Core docker - Linux 容器。查找我的内置项目的特定文件
- java - 如何处理 Spring Data JDBC 中的软删除?
- java - java.lang.NoClassDefFoundError: org/apache/poi/ss/usermodel/Row
- javascript - 使用 bandintown API 搜索地理区域中的所有事件
- python - 如何检查同一个字典中是否存在两个键值对
- three.js - 使用 OrbitControls 围绕网格的 ThreeJS 奇怪的相机移动
- actions-on-google - 谷歌上的操作 - 如何处理长时间运行的操作
- python - Python:使用递归返回文件的完整路径