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.

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:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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.

Kalıcı başlık

Kalıcı gövde metni buraya gelir.

<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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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>

Değişen mod içeriği

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 ve event.relatedTargetHTML özniteliklerini data-*( muhtemelen jQuery aracılığıyla ) 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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Animasyonu değiştir

Değişken , kalıcı yavaşlama animasyonundan önceki $modal-fade-transformdönüştürme durumunu, 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').modal('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 modalımız “orta” boyutlu modal'ı oluşturur.

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

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ılmak için ekler ve .modal-openkipin dışına tıklandığında gösterilen kipleri yok saymak için bir tıklama alanı sağlamak üzere bir a oluşturur.<body>.modal-backdrop

Veri öznitelikleri aracılığıyla

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

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

JavaScript aracılığıyla

myModalTek bir JavaScript satırı ile kimliği olan bir model çağırın :

$('#myModal').modal(options)

Seçenekler

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

İsim Tip Varsayılan Tanım
zemin boolean veya dize'static' doğru Kalıcı bir arka plan öğesi içerir. Alternatif olarak, statictıklamada modu kapatmayan bir arka plan belirtin.
tuş takımı boole doğru Çıkış tuşuna basıldığında modu kapatır
odak boole doğru Başlatıldığında odağı modalın üzerine koyar.
göstermek boole doğru Başlatıldığında kipi gösterir.

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 .

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

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').modal('toggle')

.modal('show')

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

$('#myModal').modal('show')

.modal('hide')

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

$('#myModal').modal('hide')

.modal('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.

$('#myModal').modal('handleUpdate')

.modal('dispose')

Bir elemanın kipini yok eder.

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 relatedTargetolayın özelliği olarak kullanılabilir.
Gösterilen.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 relatedTargetolayın özelliği olarak kullanılabilir.
hide.bs.modal hideBu olay, örnek yöntemi çağrıldığında hemen tetiklenir .
gizli.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 staticbir çıkış tuşuna basıldığında tetiklenir .data-keyboardfalse 
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})