Source

Τροπικός

Χρησιμοποιήστε το 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" role="dialog">
  <div class="modal-dialog" role="document">
    <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">&times;</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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 για να δείτε τι εννοούμε.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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 με δυνατότητα κύλισης που επιτρέπει την κύλιση στο σώμα του modal προσθέτοντας .modal-dialog-scrollableστο .modal-dialog.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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-dialog-centeredστο για .modal-dialogνα κεντράρετε κάθετα το modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Δυναμικά ύψη

Εάν το ύψος ενός modal αλλάζει ενώ είναι ανοιχτό, θα πρέπει να καλέσετε $('#myModal').modal('handleUpdate')για να προσαρμόσετε ξανά τη θέση του modal σε περίπτωση που εμφανιστεί μια γραμμή κύλισης.

Προσιτότητα

Βεβαιωθείτε ότι έχετε προσθέσει role="dialog"και aria-labelledby="...", αναφερόμενος στον τροπικό τίτλο, στο .modal, και role="document"στον .modal-dialogεαυτό του. Επιπλέον, μπορείτε να δώσετε μια περιγραφή του τρόπου διαλόγου σας με aria-describedbyτο .modal.

Ενσωμάτωση βίντεο YouTube

Η ενσωμάτωση βίντεο YouTube σε modals απαιτεί επιπλέον JavaScript όχι σε Bootstrap για αυτόματη διακοπή της αναπαραγωγής και πολλά άλλα. Δείτε αυτήν τη χρήσιμη ανάρτηση Stack Overflow για περισσότερες πληροφορίες.

Προαιρετικά μεγέθη

Τα Modal έχουν τρία προαιρετικά μεγέθη, διαθέσιμα μέσω κατηγοριών τροποποιητών για να τοποθετηθούν σε ένα .modal-dialog. Αυτά τα μεγέθη εμφανίζονται σε ορισμένα σημεία διακοπής για να αποφευχθούν οριζόντιες γραμμές κύλισης σε στενότερες θυρίδες προβολής.

Μέγεθος Τάξη Μέγιστο πλάτος τρόπων
Μικρό .modal-sm 300px
Προκαθορισμένο Κανένας 500px
Μεγάλο .modal-lg 800px
Πολύ μεγάλο .modal-xl 1140px

Το προεπιλεγμένο μας modal χωρίς κλάση τροποποιητή αποτελεί το modal "μεσαίου" μεγέθους.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</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 ή ένα πάτημα του πλήκτρου διαφυγής. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})