Chrome版本:版本111.0.5563.64(正式构建版本)(x86_64) Bootstrap :4.3.1
最近的chrome更新使模态背景显示在模态本身的前面。我已经检查了不是z-index的问题,不确定是什么原因造成的。
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #000;
}
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: block;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
}
<div class="modal fade" id="aboutUs" tabindex="-1" role="dialog" aria-labelledby="aboutUsModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ property.othersPopupTitle | translate: langPreference }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<a (click)="tncOnClick()" class="select-wrapper">
<label>{{ property.tnc | translate: langPreference }}</label>
</a>
<a class="select-wrapper" href="{{'tel:'+ contactUs}}" *ngIf="isMobileDevice">
<div class="select-icon"></div>
<label>{{ property.contactUs | translate: langPreference }}</label>
</a>
</div>
</div>
</div>
</div>
</div>
1条答案
按热度按时间lsmd5eda1#
不要降级 Bootstrap 。只需在主样式文件(style.css)中将背景添加到.modal并将modal-background显示添加到none。不要忘记在angular.json中的 Bootstrap 文件之后调用主样式. css文件。