我发现要在全局CSS文件中设置的解决方案:
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 10000;
}
打破其他对话框窗口(例如,MatDialog的窗体内部窗体中使用的MatDatepicker后面)。 在本地设置它似乎没有效果,根据这篇文章更改视图封装: Displaying a mat-select inside a modal dialog 仍然会中断其他对话框窗口(与全局设置样式相同)。我可以通过其他方式实现它吗?
编辑:
示例stackblitz,其中选择选项甚至不显示: https://stackblitz.com/edit/angular-jkxsig-en8bze?file=app/
答案 0 :(得分:0)
当我初始化ID时,它起作用了。
import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
export interface Food {
value: string;
viewValue: string;
}
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}
];
closeResult: string;
ariaId = 'modal-basic-title';
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: 'lg', backdrop: 'static' }, ).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
html
<ng-template #content let-modal let-id="ariaId">
<div class="modal-header">
<h4 class="modal-title" id="{{ariaId}}">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</div>
<h4>Basic mat-select</h4>
<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
<pre>{{closeResult}}</pre>
答案 1 :(得分:0)
好的,好像我找到了问题的原因和解决方案。 因此,出现问题的原因是这样的事实:引导模态窗口( ngb-modal-window )出现在背景( ngb-modal-backdrop )下,如下所述:< / p>
Bootstrap modal appearing under background
设置模式窗口的z-index无效,因为背景在堆叠上下文中始终较高,并且引导程序框架在组件创建后始终将其z-index覆盖为1050。 我在这里找到了两种解决问题的方法:
Bootstrap modal appearing under background
1。)使用 NgbModalOptions (将backdrop
属性设置为false)并为模式窗口添加类(设置windowClass
属性)来禁用背景。然后在全局z-index
文件中为我们的窗口类的style.css
设置非常低的值:
ngb-modal-window.test {
z-index: 1;
}
缺点是,我们现在没有用于自举模式的背景。
2。)将模式窗口直接添加到html层次结构中的正文容器下,或仅将其附加到它,如此处所述:
https://github.com/twbs/bootstrap/issues/23916
我尚未对其进行测试,但是它应该可以工作,在这里您可以找到有关如何将元素附加到html正文的信息:
https://hackernoon.com/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6