Versi Chrome: Versi 111.0.5563.64 (versi rasmi) (x86_64) Pemuat But: 4.3.1
Kemas kini krom terkini menjadikan latar belakang modal muncul di hadapan modal itu sendiri. Saya menyemak bahawa ia bukan masalah indeks-z, tetapi saya tidak tahu apa yang menyebabkannya.
.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>
Berhati-hati untuk sambungan Chrome. Saya mendapati bahawa "Penjana Skema untuk Data Berstruktur" menambahkan peraturan ini sebagai lembaran gaya suntikan:
Cuba lumpuhkan satu demi satu.
Jangan turun taraf bootstrap.
Cuma tambahkan latar belakang pada
.modal
dan jadikan.modal-backdrop
muncul sebagai Tiada dalam fail gaya utama (style.css.modal
中,并将.modal-backdrop
在主样式文件 (style.css) 中显示为无.不要忘记在
angular.json
中的引导文件之后调用主style.css
Jangan lupa untuk menambah style.css utama kemudiannya dipanggil selepas fail bootstrap dalam code>angular.json.