我在我的 Angular 5 项目中使用 bootstrap
模态来打开模态。但我现在这样做的方式是让模式在整个屏幕顶部打开,这是我不希望发生的。
这是我的 Angular 布局代码。
<div class="wrapper">
<div class="sidebar" data-active-color="white" data-background-color="black" data-image="../assets/img/sidebar-1.jpg">
<!-- <div class="sidebar" data-color="red" data-image=""> -->
<sidebar-cmp></sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>
<div class="main-panel">
<navbar-cmp></navbar-cmp>
<router-outlet></router-outlet>
<div *ngIf="!isMap()">
<footer-cmp></footer-cmp>
</div>
</div>
</div>
正如您所看到的,有 sidebar
组件和 router-outlet
,模式存在于 router-outlet
组件中,但是它仍然显示在侧边栏
组件的顶部。两个组件并排显示。
这就是我在 typescript 文件中显示模式的方式:
@ViewChild('DetailModal') detailRef: ElementRef;
$(this.detailRef.nativeElement);
$(this.detailRef.nativeElement).modal("show");
模态内容在组件的定义中:
<div>
<!-- The definition of the Component that gets in the router-outlet-->
<div class=" container modal fade" #DetailModal>
<app-detail-modal [Cert]="DCert"></app-detail-modal>
</div>
</div>
如何使模态框仅显示在其所在组件的顶部?
最佳答案
您可以通过将容器位置设置为相对位置,并将模态容器位置设置为绝对位置,使用 css 将实际模态框定位在容器内
#my-modal-container {
height:300px;
width: 600px;
border: 4px solid green;
position: relative;
}
.modal {
position: absolute;
}
然后,您可以隐藏 Bootstrap 覆盖层并将其替换为内联覆盖层。
// Hide the default backdrop
.modal-backdrop {
display: none;
}
// Make another backdrop with styles copied from the jQuery one, and
// place it alongside your modal component
body.modal-open .inline-modal-backdrop {
position: absolute;
opacity: 0.5;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
然后您可以将所有这些包装在一个 Angular 组件中,其中包含 bs 模态容器和新的内联背景
<div class="modal"><ng-content></ng-content></div>
<div class="inline-modal-backdrop"></div>
这是一个代码笔(没有 Angular )
关于javascript - Jquery/bootstrap 模态位于特定的 Angular 5 组件之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50963672/