in English

Τροπικός

Χρησιμοποιήστε το 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">&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" 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">&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" 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">&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 για να δείτε τι εννοούμε.