Html 如何在angular中使用css创建类似div的引导弹出窗口
我有一个表,它的数据来自循环,这里有一个“点击这里”链接,当你点击链接时,一个div将打开position-absolute,这个div我想用css创建一个bootstrap模式。如果它是好的引导它ok。当你按下关闭按钮时,弹出窗口应该像引导一样关闭。下面是代码 app.component.html 可在以下设备上测试代码: 从W3Schools获得了一些代码,还添加了2个接受索引的javascript函数。代码是自解释的 app.component.htmlHtml 如何在angular中使用css创建类似div的引导弹出窗口,html,css,angular,Html,Css,Angular,我有一个表,它的数据来自循环,这里有一个“点击这里”链接,当你点击链接时,一个div将打开position-absolute,这个div我想用css创建一个bootstrap模式。如果它是好的引导它ok。当你按下关闭按钮时,弹出窗口应该像引导一样关闭。下面是代码 app.component.html 可在以下设备上测试代码: 从W3Schools获得了一些代码,还添加了2个接受索引的javascript函数。代码是自解释的 app.component.html <table class=
<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.css
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';
}
}
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;
}
祝你的项目好运
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';
}
}
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;
}