in English

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:

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

myModal.addEventListener('shown.bs.modal', function () {
  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 modal, dışına tıklandığında 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 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>

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 .

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

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ç

<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`	Aşağıda`576px`
`.modal-fullscreen-md-down`	Aşağıda`768px`
`.modal-fullscreen-lg-down`	Aşağıda`992px`
`.modal-fullscreen-xl-down`	Aşağıda`1200px`
`.modal-fullscreen-xxl-down`	Aşağıda`1400px`

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

küstah

Değişkenler

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

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 {
        @include border-radius(0);
      }

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

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

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 kipi kapatmanın her iki yolu da desteklense de, bir kipi dışarıdan çıkarmanın WAI-ARIA kalıcı iletişim kutusu tasarım 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:

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

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-bs-gibi ekleyin data-bs-backdrop="".

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

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.

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

geçiş

Bir modu manuel olarak değiştirir. Modal gerçekten gösterilmeden veya gizlenmeden (yani shown.bs.modalveya hidden.bs.modalolayı gerçekleşmeden önce) arayana geri döner.

myModal.toggle()

göstermek

Bir modeli manuel olarak açar. Modal fiilen gösterilmeden önce (yani shown.bs.modalolay meydana gelmeden önce) arayana geri döner.

myModal.show()

relatedTargetAyrıca, modal olaylarda ( özellik olarak) alınabilecek bir argüman olarak bir DOM öğesini iletebilirsiniz .

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

saklamak

Bir modu el ile gizler. Modal gerçekten gizlenmeden (yani hidden.bs.modalolay meydana gelmeden önce) arayana geri döner.

myModal.hide()

tanıtıcıGüncelleme

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.

myModal.handleUpdate()

elden çıkarmak

Bir elemanın kipini yok eder. (DOM öğesinde depolanan verileri kaldırır)

myModal.dispose()

getInstance

Bir DOM öğesiyle ilişkili mod örneğini elde etmenizi sağlayan statik yöntem

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

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

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

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 tipi	Tanım
`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.
`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 ve kipin dışında bir tıklama veya klavye seçeneğiyle veya olarak ayarlandığında `static`bir çıkış tuşuna basıldığında tetiklenir .`data-bs-keyboardfalse`

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