Chrome version: Version 111.0.5563.64 (official version) (x86_64) Bootloader: 4.3.1
Recent chrome updates make the modal background appear in front of the modal itself. I checked that it was not a z-index problem, but I don't know what caused it.
.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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Watch out for Chrome extensions. I found that "Schema Generator for Structured Data" adds this rule as Inject Stylesheet:
.modal-backdrop { z-index: 2147483647 !important; }Try disabling them one by one.
Do not downgrade bootstrap.
Just add the background to
.modaland.modal-backdropto None in the main style file (style.css).Don’t forget The main
style.cssfile is called after the bootstrap file inangular.json..modal { background: rgba(0, 0, 0, 0.5); } .modal-backdrop { display: none; }