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:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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-bs-* για να διαφοροποιήσετε τα περιεχόμενα του modal ανάλογα με το κουμπί που κάνατε κλικ.

Παρακάτω είναι μια ζωντανή επίδειξη ακολουθούμενη από παράδειγμα HTML και JavaScript. Για περισσότερες πληροφορίες, διαβάστε τα έγγραφα τροπικών συμβάντων για λεπτομέρειες σχετικά με relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Εναλλαγή μεταξύ των τρόπων

Εναλλαγή μεταξύ πολλών τρόπων με κάποια έξυπνη τοποθέτηση των χαρακτηριστικών data-bs-targetκαι data-bs-toggle. Για παράδειγμα, μπορείτε να αλλάξετε έναν τρόπο επαναφοράς κωδικού πρόσβασης μέσα από έναν ήδη ανοιχτό τρόπο σύνδεσης. Λάβετε υπόψη σας ότι δεν μπορούν να είναι ανοιχτά πολλά modal ταυτόχρονα — αυτή η μέθοδος απλώς εναλλάσσεται μεταξύ δύο διαφορετικών τρόπων.

Ανοίξτε το πρώτο modal

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Αλλαγή κινουμένων σχεδίων

Η $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.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 που καλύπτει τη θύρα προβολής του χρήστη, διαθέσιμο μέσω κλάσεων τροποποιητών που τοποθετούνται σε ένα .modal-dialog.

Τάξη	Διαθεσιμότητα
`.modal-fullscreen`	Πάντα
`.modal-fullscreen-sm-down`	Παρακάτω`576px`
`.modal-fullscreen-md-down`	Παρακάτω`768px`
`.modal-fullscreen-lg-down`	Παρακάτω`992px`
`.modal-fullscreen-xl-down`	Παρακάτω`1200px`
`.modal-fullscreen-xxl-down`	Παρακάτω`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Μεταβλητές

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Βρόχος

Τα αποκριτικά μοντέλα πλήρους οθόνης δημιουργούνται μέσω του $breakpointsχάρτη και ενός βρόχου στο scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

Χρήση

Το modal plugin εναλλάσσει το κρυφό περιεχόμενό σας κατά παραγγελία, μέσω χαρακτηριστικών δεδομένων ή JavaScript. Επίσης, παρακάμπτει την προεπιλεγμένη συμπεριφορά κύλισης και δημιουργεί ένα .modal-backdropγια να παρέχει μια περιοχή κλικ για την παράβλεψη των εμφανιζόμενων τρόπων όταν κάνετε κλικ εκτός του τρόπου λειτουργίας.

Μέσω χαρακτηριστικών δεδομένων

Μεταβάλλω

Ενεργοποιήστε ένα modal χωρίς εγγραφή JavaScript. Ρυθμίστε data-bs-toggle="modal"σε ένα στοιχείο ελεγκτή, όπως ένα κουμπί, μαζί με ένα data-bs-target="#foo"ή href="#foo"για να στοχεύσετε ένα συγκεκριμένο modal για εναλλαγή.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Απολύω

Η απόρριψη μπορεί να επιτευχθεί με το dataχαρακτηριστικό σε ένα κουμπί εντός του modal όπως φαίνεται παρακάτω:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

ή σε ένα κουμπί έξω από το modal χρησιμοποιώντας το data-bs-targetόπως φαίνεται παρακάτω:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Ενώ υποστηρίζονται και οι δύο τρόποι απόρριψης ενός modal, λάβετε υπόψη ότι η απόρριψη από έξω από ένα modal δεν ταιριάζει με το μοτίβο σχεδίασης διαλόγου modal WAI-ARIA . Κάντε αυτό με δική σας ευθύνη.

Μέσω JavaScript

Δημιουργήστε ένα modal με μία μόνο γραμμή JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-bs-, όπως στο data-bs-backdrop="".

Ονομα	Τύπος	Προκαθορισμένο	Περιγραφή
`backdrop`	boolean ή η συμβολοσειρά`'static'`	`true`	Περιλαμβάνει ένα στοιχείο modal-backdrop. Εναλλακτικά, καθορίστε `static`ένα φόντο που δεν κλείνει το modal όταν κάνετε κλικ.
`keyboard`	boolean	`true`	Κλείνει το modal όταν πατηθεί το πλήκτρο escape
`focus`	boolean	`true`	Εστιάζει στο modal όταν αρχικοποιείται.

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

Όλες οι μέθοδοι API είναι ασύγχρονες και ξεκινούν μια μετάβαση . Επιστρέφουν στον καλούντα μόλις ξεκινήσει η μετάβαση αλλά πριν τελειώσει . Επιπλέον, μια κλήση μεθόδου σε ένα στοιχείο μετάβασης θα αγνοηθεί .

Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες .

Επιλογές μετάβασης

Ενεργοποιεί το περιεχόμενό σας ως τρόπο λειτουργίας. Αποδέχεται μια προαιρετική επιλογή object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

μεταβάλλω

Εναλλάσσει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το modal (δηλαδή πριν συμβεί το shown.bs.modalή το hidden.bs.modalσυμβάν).

myModal.toggle()

προβολή

Ανοίγει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί στην πραγματικότητα το modal (δηλαδή πριν συμβεί το shown.bs.modalσυμβάν).

myModal.show()

Επίσης, μπορείτε να μεταβιβάσετε ένα στοιχείο DOM ως όρισμα που μπορεί να ληφθεί στα συμβάντα τύπου (ως relatedTargetιδιότητα).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

κρύβω

Χειροκίνητα κρύβει ένα modal. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του modal (δηλαδή πριν συμβεί το hidden.bs.modalσυμβάν).

myModal.hide()

handleUpdate

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

myModal.handleUpdate()

διαθέτω

Καταστρέφει τον τρόπο λειτουργίας ενός στοιχείου. (Καταργεί τα αποθηκευμένα δεδομένα στο στοιχείο DOM)

myModal.dispose()

getInstance

Στατική μέθοδος που σας επιτρέπει να λαμβάνετε το modal instance που σχετίζεται με ένα στοιχείο DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Στατική μέθοδος που σας επιτρέπει να λαμβάνετε το modal instance που σχετίζεται με ένα στοιχείο DOM ή να δημιουργήσετε ένα νέο σε περίπτωση που δεν είχε αρχικοποιηθεί

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

Εκδηλώσεις

Η κλάση modal του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα του modal. Όλα τα τροπικά συμβάντα πυροδοτούνται στο ίδιο το modal (δηλαδή στο <div class="modal">).

Τύπος συμβάντος	Περιγραφή
`show.bs.modal`	Αυτό το συμβάν ενεργοποιείται αμέσως όταν `show`καλείται η μέθοδος παρουσίας. Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως `relatedTarget`ιδιότητα του συμβάντος.
`shown.bs.modal`	Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως `relatedTarget`ιδιότητα του συμβάντος.
`hide.bs.modal`	Αυτό το συμβάν ενεργοποιείται αμέσως μετά την `hide`κλήση της μεθόδου παρουσίας.
`hidden.bs.modal`	Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
`hidePrevented.bs.modal`	Αυτό το συμβάν ενεργοποιείται όταν εμφανίζεται το modal, το φόντο του `static`και εκτελείται ένα κλικ έξω από το modal ή ένα πάτημα πλήκτρων διαφυγής με την επιλογή πληκτρολογίου ή `data-bs-keyboard`ορίζεται σε `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})