in English

Modal

Benotzt Bootstrap's JavaScript modal Plugin fir Dialogen op Är Site fir Lightboxen, Benotzer Notifikatiounen oder komplett personaliséiert Inhalter ze addéieren.

Op dëser Säit

Wéi et funktionnéiert

Ier Dir mam Bootstrap's modale Komponent ufänkt, gitt sécher déi folgend ze liesen well eis Menüoptioune viru kuerzem geännert hunn.

Modale gi mat HTML, CSS a JavaScript gebaut. Si sinn iwwer alles anescht am Dokument positionéiert an ewechzehuelen Scroll aus dem <body>sou datt modal Inhalt scrollt amplaz.
Klickt op de Modal "Kulisse" mécht de Modal automatesch zou.
Bootstrap ënnerstëtzt nëmmen eng modal Fënster gläichzäiteg. Nested Modals ginn net ënnerstëtzt well mir gleewen datt se schlecht Benotzererfarungen sinn.
Modals benotzen position: fixed, wat heiansdo e bësse speziell iwwer seng Rendering ka sinn. Wann ëmmer méiglech, setzt Är modal HTML an enger Top-Level Positioun fir potenziell Interferenz vun aneren Elementer ze vermeiden. Dir wäert méiglecherweis an Probleemer lafen wann Dir en .modalan engem anere fixen Element nest.
Nach eng Kéier, wéinst position: fixed, ginn et e puer Virschléi mat der Benotzung vu Modalen op mobilen Apparater. Gesinn eis Browser Support Dokumenter fir Detailer.
Wéinst wéi HTML5 seng Semantik definéiert, huet den autofocusHTML Attribut keen Effekt a Bootstrap Modal. Fir deeselwechten Effekt z'erreechen, benotzt e puer personaliséiert JavaScript:

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

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Liest weider fir Demos a Benotzungsrichtlinnen.

Beispiller

Drënner ass e statesch modal Beispill (dat heescht seng positiona displaygoufen iwwerschriwwen). Abegraff sinn de modale Header, modale Kierper (obligatoresch fir padding), a modal Fousszeilen (optional). Mir froen datt Dir modal Header mat Entloossaktiounen enthält wann ëmmer méiglech, oder eng aner explizit Entloossaktioun ubitt.

<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>

Live Demo

Toggle eng funktionéierend modal Demo andeems Dir op de Knäppchen hei drënner klickt. Et rutscht erof a verschwannen vun uewen op der Säit.

<!-- 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>

Statesch Kuliss

Wann den Hannergrond op statesch gesat ass, gëtt de Modal net zou wann Dir dobausse klickt. Klickt op de Knäppchen hei ënnen fir et ze probéieren.

<!-- 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>

Scrolling laang Inhalt

Wann d'Modalen ze laang ginn fir de Viewport oder den Apparat vum Benotzer, scrollen se onofhängeg vun der Säit selwer. Probéiert d'Demo hei ënnen fir ze kucken wat mir mengen.

Dir kënnt och e scrollbare Modal erstellen, deen de modale Kierper scrollt andeems Dir .modal-dialog-scrollableop .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertikal zentréiert

Füügt .modal-dialog-centeredfir .modal-dialogde Modal vertikal ze zentréieren.

<!-- 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 an Popovers

Tooltips a Popovers kënne bannent Modale plazéiert ginn wéi néideg. Wann d'Modalen zou sinn, ginn all Tooltips a Popovers bannent och automatesch entlooss.

<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>

Benotzt de Gitter

Benotzt de Bootstrap Gitter System bannent engem Modal andeems Dir .container-fluidan der .modal-body. Dann benotzt déi normal Gittersystemklassen wéi Dir soss anzwousch géift.

<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>

Hutt Dir eng Rëtsch Knäppercher déi all déiselwecht Modal mat liicht ënnerschiddlechen Inhalter ausléisen? Benotzt event.relatedTargetan HTML data-bs-*Attributer fir den Inhalt vum Modal ze variéieren jee no wéi ee Knäppchen geklickt gouf.

Drënner ass eng Live Demo gefollegt vum Beispill HTML a JavaScript. Fir méi Informatioun, liest d'Modal Eventer Dokumenter fir Detailer iwwer 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
})

Wiesselt tëscht Modalen

Wiesselt tëscht Multiple Modale mat e puer clevere Placement vun den data-bs-targetan data-bs-toggleAttributer. Zum Beispill, Dir kënnt e Passwuert zréckgesat Modal aus engem schonn opgemaache Sign-in Modal wiesselen. Notéiert w.e.g. datt verschidde Modaler net zur selwechter Zäit kënnen op sinn - dës Method wiesselt einfach tëscht zwee separat Modal.

Éischt Modal opmaachen

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>

Änneren Animatioun

D' $modal-fade-transformVariabel bestëmmt den Transformatiounszoustand vu .modal-dialogvirun der modaler Fade-in Animatioun, d' $modal-show-transformVariabel bestëmmt d'Transformatioun vun .modal-dialogum Enn vun der modaler Fade-in Animatioun.

Wann Dir zum Beispill eng Zoom-in Animatioun wëllt, kënnt Dir setzen $modal-fade-transform: scale(.8).

Ewechzehuelen Animatioun

Fir Modaler déi einfach erschéngen anstatt ze verschwannen fir ze kucken, läscht d' .fadeKlass aus Ärem Modal Markup.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dynamesch Héichten

Wann d'Héicht vun engem Modal ännert wärend et op ass, sollt Dir uruffen myModal.handleUpdate()fir d'Positioun vum Modal z'änneren am Fall wou eng Scrollbar erscheint.

Accessibilitéit

Gitt sécher bäizefügen aria-labelledby="...", de modalen Titel ze referenzéieren, op .modal. Zousätzlech kënnt Dir eng Beschreiwung vun Ärem modalen Dialog mat aria-describedbyop ginn .modal. Notéiert datt Dir net braucht derbäi ze ginn role="dialog"well mir et scho iwwer JavaScript addéieren.

Embetting YouTube Videoen

Embedding vu YouTube Videoen a Modalen erfuerdert zousätzlech JavaScript net am Bootstrap fir automatesch d'Playback ze stoppen a méi. Gesinn dës hëllefräich Stack Overflow Post fir méi Informatiounen.

Optional Gréissten

Modaler hunn dräi fakultativ Gréissten, verfügbar iwwer Modifikatiounsklassen fir op engem plazéiert ze ginn .modal-dialog. Dës Gréisste kicken op bestëmmte Breakpunkte fir horizontale Scrollbars op méi schmuele Viewports ze vermeiden.

Gréisst	Klass	Modal Max-Breet
Kleng	`.modal-sm`	`300px`
Default	Keen	`500px`
Grouss	`.modal-lg`	`800px`
Extra grouss	`.modal-xl`	`1140px`

Eis Standardmodal ouni Modifizéierungsklass mécht de "mëttel" Gréisst Modal aus.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Eng aner Iwwerschrëft ass d'Optioun fir e Modal opzemaachen, deen de Benotzerviewport deckt, verfügbar iwwer Modifizéierungsklassen, déi op engem .modal-dialog.

Klass	Disponibilitéit
`.modal-fullscreen`	Ëmmer
`.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

Variablen

Dobäi an v5.2.0

Als Deel vum Bootstrap senger evoluéierender CSS Variablen Approche benotzen d'Modalen elo lokal CSS Variablen op .modala .modal-backdropfir verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

  --#{$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 Variablen

$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);

Loop

Reaktiounsfäeger Vollbildmodus ginn iwwer d' $breakpointsKaart an eng Loop generéiert 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;
      }
    }
  }
}

Benotzung

De modale Plugin wiesselt Äre verstoppte Inhalt op Ufro, iwwer Datenattributer oder JavaScript. Et iwwerschreift och Standard Scrollverhalen a generéiert e .modal-backdropfir e Klickberäich ze bidden fir ugewisen Modaler ze entloossen wann Dir ausserhalb vum Modal klickt.

Duerch Daten Attributer

Toggle

Aktivéiert e Modal ouni JavaScript ze schreiwen. Setzt data-bs-toggle="modal"op e Controllerelement, wéi e Knäppchen, zesumme mat engem data-bs-target="#foo"oder href="#foo"fir e spezifesche Modal ze zielen fir ze wiesselen.

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

Entlooss

Entloossung kann erreecht ginn mat dem dataAttribut op engem Knäppchen am Modal wéi hei ënnen gewisen:

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

oder op engem Knäppchen ausserhalb vum Modal benotzt de data-bs-targetwéi hei ënnen gewisen:

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

Wärend béid Weeër fir e Modal z'entloossen ënnerstëtzt ginn, bedenkt datt d'Entloossung vu baussen e Modal net mam ARIA Authoring Practices Guide Dialog (modal) Muster entsprécht . Maachen dëst op Ären eegene Risiko.

Iwwer JavaScript

Erstellt e Modal mat enger eenzeger Zeil vu JavaScript:

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

Optiounen

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Numm	Typ	Default	Beschreiwung
`backdrop`	boolesch,`'static'`	`true`	Ëmfaasst e modal Kuliss Element. Alternativ, spezifizéiert `static`fir eng Kuliss déi de Modal net zoumaacht wann Dir klickt.
`focus`	boolesch	`true`	Stellt de Fokus op de Modal wann se initialiséiert ginn.
`keyboard`	boolesch	`true`	Maacht de Modal zou wann de Fluchtschlëssel gedréckt gëtt.

Methoden

Asynchron Methoden an Iwwergäng

All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

Passéieren Optiounen

Aktivéiert Ären Inhalt als Modal. Akzeptéiert eng fakultativ Optiounen object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

Method	Beschreiwung
`dispose`	Zerstéiert d'Modal vun engem Element. (läscht gespäichert Daten am DOM Element)
`getInstance`	Statesch Method déi Iech erlaabt d'modal Instanz mat engem DOM Element assoziéiert ze kréien.
`getOrCreateInstance`	Statesch Method déi Iech erlaabt d'modal Instanz mat engem DOM Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf.
`handleUpdate`	Manuell d'Positioun vum Modal neijustéieren wann d'Héicht vun engem Modal ännert wärend et op ass (dh am Fall wou eng Scrollbar erscheint).
`hide`	Manuell verstoppt e Modal. Gitt zréck op den Uruffer ier de Modal tatsächlech verstoppt gouf (dh ier d' `hidden.bs.modal`Evenement geschitt ass).
`show`	Manuell mécht e Modal op. Gitt zréck op den Uruffer ier de Modal tatsächlech gewisen gouf (dh ier d' `shown.bs.modal`Evenement geschitt ass). Och kënnt Dir en DOM Element als Argument passéieren dat an de modalen Eventer (als `relatedTarget`Immobilie) kritt ka ginn. (dh `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Manuell wiesselt e Modal. Gëtt zréck op den Uruffer ier de Modal tatsächlech gewisen oder verstoppt gouf`shown.bs.modal` ( dh ier den `hidden.bs.modal`Event geschitt ass).

Evenementer

Dem Bootstrap seng modal Klass weist e puer Eventer fir an d'modal Funktionalitéit unzehaken. All Modal Eventer ginn op de Modal selwer geschoss (dh op der <div class="modal">).

Event	Beschreiwung
`hide.bs.modal`	Dëst Evenement gëtt direkt gebrannt wann d' `hide`Instanzmethod genannt gouf.
`hidden.bs.modal`	Dëst Evenement gëtt ausgeléist wann de Modal fäerdeg ass vum Benotzer verstoppt ze ginn (waart op CSS Iwwergäng fir fäerdeg ze sinn).
`hidePrevented.bs.modal`	Dëst Evenement gëtt ausgeléist wann de Modal gewise gëtt, seng Kuliss ass `static`an e Klick ausserhalb vum Modal gëtt gemaach. D'Evenement gëtt och gebrannt wann de Fluchtschlëssel gedréckt gëtt an d' `keyboard`Optioun op gesat gëtt `false`.
`show.bs.modal`	Dëst Event brennt direkt wann d' `show`Instanzmethod genannt gëtt. Wann duerch e Klick verursaacht gëtt, ass dat geklickt Element als `relatedTarget`Eegeschafte vum Event verfügbar.
`shown.bs.modal`	Dëst Evenement gëtt ausgeléist wann de Modal fir de Benotzer siichtbar gemaach gouf (waart op CSS Iwwergäng fir fäerdeg ze maachen). Wann duerch e Klick verursaacht gëtt, ass dat geklickt Element als `relatedTarget`Eegeschafte vum Event verfügbar.

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