Χρησιμοποίησα τον κώδικα για το modal μου κατευθείαν από το παράδειγμα Bootstrap και συμπεριέλαβα μόνο το bootstrap.js (και όχι το bootstrap-modal.js). Ωστόσο, το modal μου εμφανίζεται κάτω από το γκρίζο fade (φόντο) και δεν είναι επεξεργάσιμο.
Εδώ'είναι αυτό που μοιάζει:
Δείτε [αυτό το fiddle][2] για έναν τρόπο αναπαραγωγής αυτού του προβλήματος. Η βασική δομή αυτού του κώδικα είναι η εξής:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
Καμία ιδέα γιατί συμβαίνει αυτό ή τι μπορώ να κάνω για να το διορθώσω;
Εάν το modal container έχει σταθερή ή σχετική θέση ή βρίσκεται μέσα σε ένα στοιχείο με σταθερή ή σχετική θέση, θα εμφανιστεί αυτή η συμπεριφορά.
Επιβεβαιώστε ότι το modal container και όλα τα γονικά του στοιχεία έχουν τοποθετηθεί με τον προεπιλεγμένο τρόπο για να διορθώσετε το πρόβλημα.
Ακολουθούν μερικοί τρόποι για να το κάνετε αυτό:
</body>
.position:
από το modal και τους προγόνους του μέχρι να εξαφανιστεί το πρόβλημα. Ωστόσο, αυτό μπορεί να αλλάξει την εμφάνιση και τη λειτουργία της σελίδας.Το πρόβλημα έχει να κάνει με την τοποθέτηση των γονικών δοχείων. Μπορείτε εύκολα να "μετακινήσετε" το modal σας έξω από αυτά τα δοχεία πριν το εμφανίσετε. Εδώ είναι πώς να το κάνετε αν εμφανίζατε
το modal σας χρησιμοποιώντας js:
$('#myModal').appendTo("body").modal('show');
Ή, αν ξεκινάτε το modal χρησιμοποιώντας κουμπιά, αφήστε το .modal('show');
και απλά κάντε το:
$('#myModal').appendTo("body")
Αυτό θα διατηρήσει όλη την κανονική λειτουργικότητα, επιτρέποντάς σας να εμφανίσετε το modal χρησιμοποιώντας ένα κουμπί.
Το κατάφερα να λειτουργήσει δίνοντας μια υψηλή τιμή z-index στο modal παράθυρο ΜΕΤΑ το άνοιγμά του. Π.χ:
$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");