kalıcı

Lightbox'lar, kullanıcı bildirimleri veya tamamen özel içerik için sitenize iletişim kutuları eklemek için Bootstrap'ın JavaScript kalıcı eklentisini kullanın.

Bu sayfada

Nasıl çalışır

Bootstrap'in modal bileşenine başlamadan önce, menü seçeneklerimiz yakın zamanda değiştiği için aşağıdakileri okuduğunuzdan emin olun.

Modallar HTML, CSS ve JavaScript ile oluşturulmuştur. Belgedeki diğer her şeyin üzerine yerleştirilirler ve <body>bunun yerine kalıcı içeriğin kaydırılması için kaydırmayı kaldırırlar.
Kalıcı "zemin" üzerine tıklamak, modu otomatik olarak kapatacaktır.
Bootstrap, aynı anda yalnızca bir kalıcı pencereyi destekler. Zayıf kullanıcı deneyimleri olduğuna inandığımız için iç içe modlar desteklenmemektedir.
Kipler position: fixed, bazen oluşturma konusunda biraz özel olabilen kullanır. Mümkün olduğunda, diğer öğelerden gelebilecek olası parazitleri önlemek için kalıcı HTML'nizi en üst düzeyde bir konuma yerleştirin. .modalBaşka bir sabit öğenin içine yerleştirirken büyük olasılıkla sorunlarla karşılaşacaksınız .
Bir kez daha, nedeniyle position: fixed, mobil cihazlarda modların kullanılmasıyla ilgili bazı uyarılar var. Ayrıntılar için tarayıcı destek belgelerimize bakın.
HTML5'in semantiğini nasıl tanımladığı nedeniyle , autofocusHTML özniteliğinin Bootstrap modellerinde hiçbir etkisi yoktur. Aynı efekti elde etmek için bazı özel JavaScript kullanın:

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

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

Bu bileşenin animasyon efekti prefers-reduced-motionortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın .

Demolar ve kullanım yönergeleri için okumaya devam edin.

Örnekler

Aşağıda statik bir mod örneği verilmiştir (yani onun positionve displaygeçersiz kılınmıştır). Kalıcı üstbilgi, kalıcı gövde ( için gereklidir padding) ve kalıcı altbilgi (isteğe bağlı) dahildir. Mümkün olduğunda kapatma eylemleriyle kalıcı başlıklar eklemenizi veya başka bir açık kapatma eylemi sağlamanızı rica ediyoruz.

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

Canlı demo

Aşağıdaki düğmeyi tıklayarak çalışan bir mod demosu arasında geçiş yapın. Aşağı kayar ve sayfanın üst kısmından kaybolur.

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

Statik zemin

Arka plan statik olarak ayarlandığında, dışına tıklandığında mod kapanmaz. Denemek için aşağıdaki butona tıklayın.

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

Uzun içeriği kaydırma

Modeller, kullanıcının görünümü veya aygıtı için çok uzun olduğunda, sayfanın kendisinden bağımsız olarak kaydırılır. Ne demek istediğimizi görmek için aşağıdaki demoyu deneyin.

.modal-dialog-scrollableAyrıca, modal gövdesini 'ye ekleyerek kaydırmaya izin veren kaydırılabilir bir mod oluşturabilirsiniz .modal-dialog.

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

Dikey merkezli

Modu dikey olarak ortalamak .modal-dialog-centerediçin ekleyin ..modal-dialog

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

Araç ipuçları ve açılır pencereler

Araç ipuçları ve popover'lar , gerektiği gibi modların içine yerleştirilebilir. Kipler kapatıldığında, içindeki herhangi bir araç ipucu ve açılır pencere de otomatik olarak reddedilir.

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

Izgarayı kullanma

Önyükleme ızgara sistemini bir mod .container-fluidiçinde iç içe geçirerek kullanın .modal-body. Ardından, normal ızgara sistemi sınıflarını başka herhangi bir yerde yaptığınız gibi kullanın.

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

Hepsi aynı modu biraz farklı içeriklerle tetikleyen bir sürü düğmeniz var mı? Hangi düğmenin tıklandığına bağlı olarak kipin içeriğini değiştirmek için event.relatedTargetve HTML data-bs-*niteliklerini kullanın .

Aşağıda, örnek HTML ve JavaScript'in izlediği canlı bir demo bulunmaktadır. Daha fazla bilgi için, ile ilgili ayrıntılar için modal olaylar belgelerini okuyunrelatedTarget .

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

Modallar arasında geçiş yap

data-bs-targetve data-bs-toggleniteliklerinin akıllıca yerleştirilmesiyle birden çok mod arasında geçiş yapın . Örneğin, zaten açık olan bir oturum açma modelinin içinden bir parola sıfırlama modeli arasında geçiş yapabilirsiniz. Lütfen birden fazla modun aynı anda açılamayacağını unutmayın; bu yöntem yalnızca iki ayrı mod arasında geçiş yapar.

İlk modu aç

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>

Animasyonu değiştir

Değişken , kalıcı yavaşlama animasyonundan önceki $modal-fade-transformdönüşüm durumunu belirler, değişken , kalıcı yavaşlama animasyonunun sonundaki dönüşümünü belirler ..modal-dialog$modal-show-transform.modal-dialog

Örneğin bir yakınlaştırma animasyonu istiyorsanız, ayarlayabilirsiniz $modal-fade-transform: scale(.8).

Animasyonu kaldır

Görüntülemek için solmak yerine basitçe görünen modlar için, .fadesınıfı modsal işaretlemenizden kaldırın.

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

Dinamik yükseklikler

Bir kipin açıkken yüksekliği değişirse, myModal.handleUpdate()bir kaydırma çubuğu görünmesi durumunda kipin konumunu yeniden ayarlamak için çağırmalısınız.

Ulaşılabilirlik

aria-labelledby="..."Kalıcı başlığa atıfta bulunarak ' a eklediğinizden emin olun .modal. aria-describedbyEk olarak, on ile kalıcı iletişim kutunuzun bir tanımını verebilirsiniz .modal. role="dialog"JavaScript aracılığıyla zaten eklediğimiz için eklemeniz gerekmediğini unutmayın .

YouTube videolarını gömme

YouTube videolarını modallere gömmek, oynatmayı otomatik olarak durdurmak ve daha fazlası için Bootstrap'ta olmayan ek JavaScript gerektirir. Daha fazla bilgi için bu faydalı Yığın Taşması gönderisine bakın.

İsteğe bağlı boyutlar

Modal'lar, bir .modal-dialog. Bu boyutlar, daha dar görünüm pencerelerinde yatay kaydırma çubuklarından kaçınmak için belirli kesme noktalarında devreye girer.

Boyut	Sınıf	Modal maksimum genişlik
Küçük	`.modal-sm`	`300px`
Varsayılan	Hiçbiri	`500px`
Büyük	`.modal-lg`	`800px`
Ekstra büyük	`.modal-xl`	`1140px`

Değiştirici sınıfı olmayan varsayılan kipimiz “orta” boyut kipini oluşturur.

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

Bir başka geçersiz kılma, bir .modal-dialog.

Sınıf	kullanılabilirlik
`.modal-fullscreen`	Hep
`.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

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, modlar artık gelişmiş gerçek zamanlı özelleştirme için .modalyerel CSS değişkenlerini kullanıyor. .modal-backdropCSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

  --#{$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};

Sas değişkenleri

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

Döngü

Duyarlı tam ekran modeller$breakpoints , harita ve içinde bir döngü aracılığıyla oluşturulur 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;
      }
    }
  }
}

kullanım

Kalıcı eklenti, veri öznitelikleri veya JavaScript aracılığıyla isteğe bağlı olarak gizli içeriğinizi değiştirir. Ayrıca, varsayılan kaydırma davranışını geçersiz kılar ve .modal-backdropkipin dışına tıklandığında gösterilen kipleri yok saymak için bir tıklama alanı sağlamak üzere bir a oluşturur.

Veri öznitelikleri aracılığıyla

Aç/Kapat

JavaScript yazmadan bir modeli etkinleştirin. Geçiş yapmak için belirli bir modu hedeflemek için veya data-bs-toggle="modal"ile birlikte bir düğme gibi bir denetleyici öğesinde ayarlayın .data-bs-target="#foo"href="#foo"

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

Azletmek

Aşağıda gösterildiği gibi , modal içindekidata bir düğmedeki öznitelikle işten çıkarma gerçekleştirilebilir :

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

veya aşağıda gösterildiği gibi modal dışındaki bir düğmede data-bs-target:

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

Bir modu kapatmanın her iki yolu da desteklense de, bir modun dışından çıkarmanın ARIA Yazma Uygulamaları Kılavuzu iletişim (modal) modeliyle eşleşmediğini unutmayın . Bunu kendi sorumluluğunuzda yapın.

JavaScript aracılığıyla

Tek satır JavaScript içeren bir model oluşturun:

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

Seçenekler

Seçenekler veri öznitelikleri veya JavaScript aracılığıyla iletilebildiğinden data-bs-, örneğinde olduğu gibi öğesine bir seçenek adı ekleyebilirsiniz data-bs-animation="{value}". Seçenekleri veri öznitelikleri üzerinden geçirirken , seçenek adının “ camelCase ” yerine “ kebab-case ” olarak değiştirildiğinden emin olun. Örneğin, data-bs-custom-class="beautifier"yerine kullanın data-bs-customClass="beautifier".

Bootstrap 5.2.0'dan itibaren, tüm bileşenler , bir JSON dizesi olarak basit bileşen yapılandırmasını barındırabilen deneysel bir ayrılmış veri özniteliğini destekler. data-bs-configBir öğe data-bs-config='{"delay":0, "title":123}'ve data-bs-title="456"özniteliklere sahip olduğunda, nihai titledeğer olacak 456ve ayrı veri öznitelikleri üzerinde verilen değerleri geçersiz kılacaktır data-bs-config. Ek olarak, mevcut veri öznitelikleri, gibi JSON değerlerini barındırabilir data-bs-delay='{"show":0,"hide":150}'.

İsim	Tip	Varsayılan	Tanım
`backdrop`	boole,`'static'`	`true`	Kalıcı bir arka plan öğesi içerir. Alternatif olarak, `static`tıklandığında modu kapatmayan bir arka plan belirtin.
`focus`	boole	`true`	Başlatıldığında odağı modalın üzerine koyar.
`keyboard`	boole	`true`	Çıkış tuşuna basıldığında modu kapatır.

yöntemler

Asenkron yöntemler ve geçişler

Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .

Daha fazla bilgi için JavaScript belgelerimize bakın .

pas seçenekleri

İçeriğinizi modal olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object.

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

Yöntem	Tanım
`dispose`	Bir elemanın kipini yok eder. (DOM öğesinde depolanan verileri kaldırır)
`getInstance`	Bir DOM öğesiyle ilişkili mod örneğini almanızı sağlayan statik yöntem.
`getOrCreateInstance`	Bir DOM öğesiyle ilişkili mod örneğini almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza izin veren statik yöntem.
`handleUpdate`	Bir kipin açıkken yüksekliği değişirse (yani bir kaydırma çubuğu göründüğünde) kipin konumunu manuel olarak yeniden ayarlayın.
`hide`	Bir modu el ile gizler. Modal gerçekten gizlenmeden (yani `hidden.bs.modal`olay meydana gelmeden önce) arayana geri döner.
`show`	Bir modeli manuel olarak açar. Modal fiilen gösterilmeden önce (yani `shown.bs.modal`olay meydana gelmeden önce) arayana geri döner. `relatedTarget`Ayrıca, modal olaylarda ( özellik olarak) alınabilecek bir argüman olarak bir DOM öğesini iletebilirsiniz . (yani `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Bir modu manuel olarak değiştirir. Modal gerçekten gösterilmeden veya gizlenmeden (yani `shown.bs.modal`veya `hidden.bs.modal`olayı gerçekleşmeden önce) arayana geri döner.

Olaylar

Bootstrap'in modal sınıfı, modal işlevselliğe bağlanmak için birkaç olayı ortaya çıkarır. Tüm mod olayları, modun kendisinde (yani 'de <div class="modal">) tetiklenir.

Etkinlik	Tanım
`hide.bs.modal`	`hide`Bu olay, örnek yöntemi çağrıldığında hemen tetiklenir .
`hidden.bs.modal`	Bu olay, kip kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).
`hidePrevented.bs.modal`	Bu olay, kip gösterildiğinde, arka planı olduğunda `static`ve kipin dışına bir tıklama yapıldığında tetiklenir. Olay ayrıca çıkış tuşuna basıldığında ve `keyboard`seçenek olarak ayarlandığında tetiklenir `false`.
`show.bs.modal`	Bu olay, `show`örnek yöntemi çağrıldığında hemen tetiklenir. Bir tıklamadan kaynaklanıyorsa, tıklanan öğe `relatedTarget`olayın özelliği olarak kullanılabilir.
`shown.bs.modal`	Bu olay, mod kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). Bir tıklamadan kaynaklanıyorsa, tıklanan öğe `relatedTarget`olayın özelliği olarak kullanılabilir.

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