Τροπικός
Χρησιμοποιήστε το modal plugin JavaScript του Bootstrap για να προσθέσετε παράθυρα διαλόγου στον ιστότοπό σας για lightbox, ειδοποιήσεις χρήστη ή εντελώς προσαρμοσμένο περιεχόμενο.
Πως δουλεύει
Πριν ξεκινήσετε με το modal στοιχείο του Bootstrap, φροντίστε να διαβάσετε τα παρακάτω, καθώς οι επιλογές του μενού μας έχουν αλλάξει πρόσφατα.
- Τα Modal είναι κατασκευασμένα με HTML, CSS και JavaScript. Τοποθετούνται πάνω από οτιδήποτε άλλο στο έγγραφο και αφαιρούν την κύλιση από το έγγραφο,
<body>
έτσι ώστε το τροπικό περιεχόμενο να κάνει κύλιση. - Κάνοντας κλικ στο modal "backdrop" θα κλείσει αυτόματα το modal.
- Το Bootstrap υποστηρίζει μόνο ένα παράθυρο κάθε φορά. Τα ένθετα modals δεν υποστηρίζονται, καθώς πιστεύουμε ότι είναι κακές εμπειρίες χρήστη.
- Τα Modal χρησιμοποιούν
position: fixed
, το οποίο μερικές φορές μπορεί να είναι λίγο ιδιαίτερο σχετικά με την απόδοσή του. Όποτε είναι δυνατόν, τοποθετήστε το modal HTML σας σε θέση ανώτατου επιπέδου για να αποφύγετε πιθανές παρεμβολές από άλλα στοιχεία. Πιθανότατα θα αντιμετωπίσετε προβλήματα κατά την ένθεση ενός.modal
σε άλλο σταθερό στοιχείο. - Για άλλη μια φορά, λόγω του
position: fixed
, υπάρχουν ορισμένες προειδοποιήσεις σχετικά με τη χρήση modals σε κινητές συσκευές. Δείτε τα έγγραφα υποστήριξης του προγράμματος περιήγησής μας για λεπτομέρειες. - Λόγω του τρόπου με τον οποίο η HTML5 ορίζει τη σημασιολογία της, το
autofocus
χαρακτηριστικό HTML δεν έχει καμία επίδραση στους τρόπους εκκίνησης. Για να επιτύχετε το ίδιο αποτέλεσμα, χρησιμοποιήστε κάποια προσαρμοσμένη JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
ερώτημα πολυμέσων. Δείτε την ενότητα
μειωμένης κίνησης της τεκμηρίωσης προσβασιμότητας .
Συνεχίστε να διαβάζετε για επιδείξεις και οδηγίες χρήσης.
Παραδείγματα
Τροπικά εξαρτήματα
Παρακάτω είναι ένα στατικό τροπικό παράδειγμα (που σημαίνει ότι έχει position
και display
έχει παρακαμφθεί). Περιλαμβάνονται η κεφαλίδα τύπου, το κύριο σώμα (απαιτείται για padding
) και το υποσέλιδο (προαιρετικό). Ζητάμε να συμπεριλάβετε κεφαλίδες με τρόπους παράβλεψης όποτε είναι δυνατόν ή να παρέχετε μια άλλη ρητή ενέργεια απόρριψης.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Ζωντανή επίδειξη
Εναλλάξτε μια λειτουργική επίδειξη, κάνοντας κλικ στο παρακάτω κουμπί. Θα γλιστρήσει προς τα κάτω και θα ξεθωριάσει από την κορυφή της σελίδας.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Στατικό σκηνικό
Όταν το φόντο έχει οριστεί σε στατικό, το modal δεν θα κλείσει όταν κάνετε κλικ έξω από αυτό. Κάντε κλικ στο κουμπί παρακάτω για να το δοκιμάσετε.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Κύλιση μεγάλου περιεχομένου
Όταν τα modal γίνονται πολύ μεγάλα για τη θύρα προβολής ή τη συσκευή του χρήστη, πραγματοποιούν κύλιση ανεξάρτητα από την ίδια τη σελίδα. Δοκιμάστε το παρακάτω demo για να δείτε τι εννοούμε.
Μπορείτε επίσης να δημιουργήσετε ένα modal με δυνατότητα κύλισης που επιτρέπει την κύλιση στο σώμα του modal προσθέτοντας .modal-dialog-scrollable
στο .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Κάθετα στο κέντρο
Προσθήκη .modal-dialog-centered
στο για .modal-dialog
να κεντράρετε κάθετα το modal.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Tooltips και popovers
Επεξηγήσεις εργαλείων και popovers μπορούν να τοποθετηθούν μέσα σε modal όπως απαιτείται. Όταν τα modals είναι κλειστά, τυχόν επεξηγήσεις εργαλείων και popovers απορρίπτονται επίσης αυτόματα.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
Χρησιμοποιώντας το πλέγμα
Χρησιμοποιήστε το σύστημα πλέγματος Bootstrap μέσα σε ένα modal τοποθετώντας .container-fluid
μέσα στο .modal-body
. Στη συνέχεια, χρησιμοποιήστε τις κανονικές τάξεις συστήματος πλέγματος όπως θα κάνατε οπουδήποτε αλλού.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
Διαφορετικό τροπικό περιεχόμενο
Έχετε ένα σωρό κουμπιά που ενεργοποιούν όλα το ίδιο modal με ελαφρώς διαφορετικά περιεχόμενα; Χρησιμοποιήστε χαρακτηριστικάevent.relatedTarget
και HTMLdata-*
(πιθανώς μέσω jQuery ) για να διαφοροποιήσετε τα περιεχόμενα του modal ανάλογα με το κουμπί που κάνατε κλικ.
Παρακάτω είναι μια ζωντανή επίδειξη ακολουθούμενη από παράδειγμα HTML και JavaScript. Για περισσότερες πληροφορίες, διαβάστε τα έγγραφα τροπικών συμβάντων για λεπτομέρειες σχετικά με relatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Αλλαγή κινούμενων εικόνων
Η $modal-fade-transform
μεταβλητή καθορίζει την κατάσταση μετασχηματισμού .modal-dialog
πριν από το modal fade-in animation, η $modal-show-transform
μεταβλητή καθορίζει τον μετασχηματισμό του .modal-dialog
στο τέλος του modal fade-in animation.
Εάν θέλετε για παράδειγμα ένα κινούμενο σχέδιο μεγέθυνσης, μπορείτε να ορίσετε $modal-fade-transform: scale(.8)
.
Κατάργηση κινούμενων εικόνων
Για τρόπους που απλώς εμφανίζονται αντί να ξεθωριάζουν για προβολή, αφαιρέστε την .fade
κλάση από τη σήμανση τρόπων.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Δυναμικά ύψη
Εάν το ύψος ενός modal αλλάζει ενώ είναι ανοιχτό, θα πρέπει να καλέσετε $('#myModal').modal('handleUpdate')
για να προσαρμόσετε ξανά τη θέση του modal σε περίπτωση που εμφανιστεί μια γραμμή κύλισης.
Προσιτότητα
Βεβαιωθείτε ότι έχετε προσθέσει aria-labelledby="..."
, αναφέροντας τον τίτλο του τρόπου λειτουργίας, στο .modal
. Επιπλέον, μπορείτε να δώσετε μια περιγραφή του τρόπου διαλόγου σας με aria-describedby
το .modal
. Σημειώστε ότι δεν χρειάζεται να προσθέσετε role="dialog"
, καθώς το προσθέτουμε ήδη μέσω JavaScript.
Ενσωμάτωση βίντεο YouTube
Η ενσωμάτωση βίντεο YouTube σε modals απαιτεί επιπλέον JavaScript όχι σε Bootstrap για αυτόματη διακοπή της αναπαραγωγής και πολλά άλλα. Δείτε αυτήν τη χρήσιμη ανάρτηση Stack Overflow για περισσότερες πληροφορίες.
Προαιρετικά μεγέθη
Τα Modal έχουν τρία προαιρετικά μεγέθη, διαθέσιμα μέσω κατηγοριών τροποποιητών για να τοποθετηθούν σε ένα .modal-dialog
. Αυτά τα μεγέθη εμφανίζονται σε ορισμένα σημεία διακοπής για να αποφευχθούν οριζόντιες γραμμές κύλισης σε στενότερες θυρίδες προβολής.
Μέγεθος | Τάξη | Μέγιστο πλάτος τρόπων |
---|---|---|
Μικρό | .modal-sm |
300px |
Προκαθορισμένο | Κανένας | 500px |
Μεγάλο | .modal-lg |
800px |
Πολύ μεγάλο | .modal-xl |
1140px |
Το προεπιλεγμένο μας modal χωρίς κλάση τροποποιητή αποτελεί το modal "μεσαίου" μεγέθους.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Χρήση
Το modal plugin εναλλάσσει το κρυφό περιεχόμενό σας κατά παραγγελία, μέσω χαρακτηριστικών δεδομένων ή JavaScript. Προσθέτει επίσης .modal-open
στην <body>
παράκαμψη της προεπιλεγμένης συμπεριφοράς κύλισης και δημιουργεί ένα .modal-backdrop
για να παρέχει μια περιοχή κλικ για την παράβλεψη των εμφανιζόμενων τρόπων κατά το κλικ εκτός του τρόπου λειτουργίας.
Μέσω χαρακτηριστικών δεδομένων
Ενεργοποιήστε ένα modal χωρίς εγγραφή JavaScript. Ρυθμίστε data-toggle="modal"
σε ένα στοιχείο ελεγκτή, όπως ένα κουμπί, μαζί με ένα data-target="#foo"
ή href="#foo"
για να στοχεύσετε ένα συγκεκριμένο modal για εναλλαγή.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Μέσω JavaScript
Κλήση ενός modal με αναγνωριστικό myModal
με μία μόνο γραμμή JavaScript:
$('#myModal').modal(options)
Επιλογές
Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-
, όπως στο data-backdrop=""
.
Ονομα | Τύπος | Προκαθορισμένο | Περιγραφή |
---|---|---|---|
σκηνικό | boolean ή η συμβολοσειρά'static' |
αληθής | Περιλαμβάνει ένα στοιχείο modal-backdrop. Εναλλακτικά, καθορίστε static ένα φόντο που δεν κλείνει το modal όταν κάνετε κλικ. |
πληκτρολόγιο | boolean | αληθής | Κλείνει το modal όταν πατηθεί το πλήκτρο escape |
Συγκεντρώνω | boolean | αληθής | Εστιάζει στο modal όταν αρχικοποιείται. |
προβολή | boolean | αληθής | Εμφανίζει το modal όταν αρχικοποιηθεί. |
Μέθοδοι
Ασύγχρονες μέθοδοι και μεταβάσεις
Όλες οι μέθοδοι API είναι ασύγχρονες και ξεκινούν μια μετάβαση . Επιστρέφουν στον καλούντα μόλις ξεκινήσει η μετάβαση αλλά πριν τελειώσει . Επιπλέον, μια κλήση μεθόδου σε ένα στοιχείο μετάβασης θα αγνοηθεί .
Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες .
.modal(options)
Ενεργοποιεί το περιεχόμενό σας ως τρόπο λειτουργίας. Αποδέχεται μια προαιρετική επιλογή object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Εναλλάσσει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το modal (δηλαδή πριν συμβεί το shown.bs.modal
ή το hidden.bs.modal
συμβάν).
$('#myModal').modal('toggle')
.modal('show')
Ανοίγει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί στην πραγματικότητα το modal (δηλαδή πριν συμβεί το shown.bs.modal
συμβάν).
$('#myModal').modal('show')
.modal('hide')
Χειροκίνητα κρύβει ένα modal. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του modal (δηλαδή πριν συμβεί το hidden.bs.modal
συμβάν).
$('#myModal').modal('hide')
.modal('handleUpdate')
Επαναρυθμίστε τη θέση του modal χειροκίνητα εάν το ύψος ενός modal αλλάζει ενώ είναι ανοιχτό (δηλ. σε περίπτωση που εμφανιστεί μια γραμμή κύλισης).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Καταστρέφει τον τρόπο λειτουργίας ενός στοιχείου.
Εκδηλώσεις
Η κλάση modal του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα του modal. Όλα τα τροπικά συμβάντα πυροδοτούνται στο ίδιο το modal (δηλαδή στο <div class="modal">
).
Τύπος συμβάντος | Περιγραφή |
---|---|
εμφανίζω.β.τροπικό | Αυτό το συμβάν ενεργοποιείται αμέσως όταν show καλείται η μέθοδος παρουσίας. Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTarget ιδιότητα του συμβάντος. |
φαίνεται.β.τροπικό | Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTarget ιδιότητα του συμβάντος. |
απόκρυψη.β.τροπικό | Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hide κλήση της μεθόδου παρουσίας. |
κρυφό.β.τροπικό | Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). |
hidePrevented.bs.modal | Αυτό το συμβάν ενεργοποιείται όταν εμφανίζεται το modal, το φόντο του static και εκτελείται ένα κλικ έξω από το modal ή ένα πάτημα πλήκτρων διαφυγής με την επιλογή πληκτρολογίου ή data-keyboard ορίζεται σε false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})