我正在尝试在 Angular 应用程序中单击按钮时显示模式。我安装了 bootstrap 并编写了 bootstrap 教程中指定的代码。该模态在单击时可用,因为它在检查浏览器的 html 期间可用但不显示在浏览器上。但是,将模态元素的显示属性从 block 更改为内容会显示模态。请在下面找到当前代码。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
模态显示在正常的 html 和 css 中而不是 Angular
最佳答案
试试下面的代码
在您的 HTML 文件中
<button type="button" class="btn btn-info btn-lg" (click)="openModal()">click to open</button>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':display}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Model Title</h4>
<button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Model body text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>
</div>
</div>
</div>
</div>
在你的 TS(组件)文件中
创建方法 2
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styles:[
`.modal{background: rgba(0,0,0, .5);`
]
})
export class AppComponent implements OnInit {
display = "none";
ngOnInit() {
}
openModal() {
this.display = "block";
}
onCloseHandled() {
this.display = "none";
}
}
希望对你有帮助
如果有任何疑问,请告诉我
谢谢
关于javascript - 单击时,Bootstrap 模态未显示在 Angular 8 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59590391/