Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
Check
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:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  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>

Στατικό σκηνικό

Όταν το Backdrop έχει οριστεί σε στατικό, το 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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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.

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `New message to ${recipient}`
  modalBodyInput.value = recipient
})

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

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

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

CSS

Μεταβλητές

Προστέθηκε στην έκδοση 5.2.0

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, τα modals χρησιμοποιούν πλέον τοπικές μεταβλητές CSS για .modalβελτιωμένη .modal-backdropπροσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές CSS ορίζονται μέσω Sass, επομένως η προσαρμογή Sass εξακολουθεί να υποστηρίζεται.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Μεταβλητές 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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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,
      .modal-footer {
        @include border-radius(0);
      }

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

Χρήση

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

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

Μεταβάλλω

Ενεργοποιήστε ένα 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 δεν ταιριάζει με το μοτίβο διαλόγου ARIA Authoring Practices Guide (modal) . Κάντε αυτό με δική σας ευθύνη.

Μέσω JavaScript

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

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Επιλογές

Καθώς οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript, μπορείτε να προσαρτήσετε ένα όνομα επιλογής στο data-bs-, όπως στο data-bs-animation="{value}". Φροντίστε να αλλάξετε τον τύπο θήκης του ονόματος της επιλογής από « camelCase » σε « kebab-case » όταν μεταβιβάζετε τις επιλογές μέσω των χαρακτηριστικών δεδομένων. Για παράδειγμα, χρησιμοποιήστε data-bs-custom-class="beautifier"αντί για data-bs-customClass="beautifier".

Από το Bootstrap 5.2.0, όλα τα στοιχεία υποστηρίζουν ένα πειραματικό χαρακτηριστικό δεσμευμένων δεδομένων data-bs-configπου μπορεί να φιλοξενήσει απλή διαμόρφωση στοιχείων ως συμβολοσειρά JSON. Όταν ένα στοιχείο έχει data-bs-config='{"delay":0, "title":123}'και data-bs-title="456"χαρακτηριστικά, η τελική titleτιμή θα είναι 456και τα ξεχωριστά χαρακτηριστικά δεδομένων θα αντικαταστήσουν τις τιμές που δίνονται στο data-bs-config. Επιπλέον, τα υπάρχοντα χαρακτηριστικά δεδομένων μπορούν να φιλοξενήσουν τιμές JSON όπως data-bs-delay='{"show":0,"hide":150}'.

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

Μέθοδοι

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

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

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

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

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

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Μέθοδος Περιγραφή
dispose Καταστρέφει τον τρόπο λειτουργίας ενός στοιχείου. (Καταργεί τα αποθηκευμένα δεδομένα στο στοιχείο DOM)
getInstance Στατική μέθοδος που σας επιτρέπει να λαμβάνετε το modal instance που σχετίζεται με ένα στοιχείο DOM.
getOrCreateInstance Στατική μέθοδος που σας επιτρέπει να λαμβάνετε το modal στιγμιότυπο που σχετίζεται με ένα στοιχείο DOM ή να δημιουργήσετε ένα νέο σε περίπτωση που δεν είχε αρχικοποιηθεί.
handleUpdate Επαναρυθμίστε τη θέση του modal χειροκίνητα εάν το ύψος ενός modal αλλάζει ενώ είναι ανοιχτό (δηλ. σε περίπτωση που εμφανιστεί μια γραμμή κύλισης).
hide Χειροκίνητα κρύβει ένα modal. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του modal (δηλαδή πριν συμβεί το hidden.bs.modalσυμβάν).
show Ανοίγει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί στην πραγματικότητα το modal (δηλαδή πριν συμβεί το shown.bs.modalσυμβάν). Επίσης, μπορείτε να μεταβιβάσετε ένα στοιχείο DOM ως όρισμα που μπορεί να ληφθεί στα συμβάντα τύπου (ως relatedTargetιδιότητα). (δηλ const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Εναλλάσσει χειροκίνητα ένα modal. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το modal (δηλαδή πριν συμβεί το shown.bs.modalή το hidden.bs.modalσυμβάν).

Εκδηλώσεις

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

Εκδήλωση Περιγραφή
hide.bs.modal Αυτό το συμβάν ενεργοποιείται αμέσως μετά την hideκλήση της μεθόδου παρουσίας.
hidden.bs.modal Αυτό το συμβάν ενεργοποιείται όταν ολοκληρωθεί η απόκρυψη του modal από τον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS).
hidePrevented.bs.modal Αυτό το συμβάν ενεργοποιείται όταν εμφανίζεται το modal, το φόντο του staticκαι εκτελείται ένα κλικ έξω από το modal. Το συμβάν ενεργοποιείται επίσης όταν πατηθεί το πλήκτρο διαφυγής και η keyboardεπιλογή έχει οριστεί σε false.
show.bs.modal Αυτό το συμβάν ενεργοποιείται αμέσως όταν showκαλείται η μέθοδος παρουσίας. Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTargetιδιότητα του συμβάντος.
shown.bs.modal Αυτό το συμβάν ενεργοποιείται όταν το modal έχει γίνει ορατό στον χρήστη (θα περιμένει να ολοκληρωθούν οι μεταβάσεις CSS). Εάν προκαλείται από ένα κλικ, το στοιχείο στο οποίο έγινε κλικ είναι διαθέσιμο ως relatedTargetιδιότητα του συμβάντος. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})