Mengapa Modal Bootstrap saya Muncul di Sebalik Tindanan Latar Belakang?-tutorial css-php.cn

Mengapa Modal Bootstrap saya Muncul di Sebalik Tindanan Latar Belakang?

Linda Hamilton

Lepaskan： 2024-12-19 18:56:10

asal

890 orang telah melayarinya

Why is my Bootstrap Modal Appearing Behind the Background Overlay?

Bootstrap Modal Tersembunyi Di Bawah Latar Belakang

Isu:

Walaupun mengikuti dokumentasi Bootstrap rasmi, modal muncul di bawah tindanan latar belakang, menghalang interaksi.

Menghasilkan Semula Isu:

Kod untuk menghasilkan semula masalah adalah serupa dengan contoh di bawah:

<body>
    <p>Lorem ipsum dolor sit amet.</p>

    <div class="my-module">
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

Salin selepas log masuk

Root Sebab:

Bekas modal (dengan kelas "pudar") boleh disembunyikan apabila ia mempunyai kedudukan bukan lalai, seperti tetap atau relatif. Isu ini berlaku apabila bekas modal atau elemen induknya diletakkan secara berbeza.

Penyelesaian:

Untuk menyelesaikan isu, pastikan bekas modal dan elemen induknya mempunyai kedudukan lalai. Terdapat dua pendekatan untuk mencapai ini:

Alihkan Modal Luar Elemen Kedudukan:
- Pindahkan div modal di luar mana-mana elemen dengan khas kedudukan (cth., sebelum penutupan tag).
Alih Keluar Sifat Kedudukan:
- Alih keluar sifat CSS "kedudukan" daripada bekas modal dannya nenek moyang sehingga modal menjadi kelihatan. Walau bagaimanapun, ini boleh menjejaskan reka letak dan kefungsian halaman.

Atas ialah kandungan terperinci Mengapa Modal Bootstrap saya Muncul di Sebalik Tindanan Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!