Chrome 版本:版本 111.0.5563.64(官方版本)(x86_64) 引导程序: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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
注意 Chrome 扩展程序。我发现“结构化数据的架构生成器”将此规则添加为注入样式表:
.modal-backdrop { z-index: 2147483647 !important; }尝试一一禁用它们。
不要降级 bootstrap。
只需将背景添加到
.modal中,并将.modal-backdrop在主样式文件 (style.css) 中显示为无.不要忘记在
angular.json中的引导文件之后调用主style.css文件。.modal { background: rgba(0, 0, 0, 0.5); } .modal-backdrop { display: none; }