Source

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.

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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>

Dikey merkezli

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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>

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>

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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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üşü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" role="dialog" 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

Modal başlığına atıfta bulunarak ve role="dialog"eklediğinizden emin olun , ' ye ve kendisine . Ek olarak, on ile kalıcı iletişim kutunuzun bir tanımını verebilirsiniz .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal

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.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</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, `static`tıklama veya çıkış tuşuna basıldığında 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 `relatedTarget`olayı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 `relatedTarget`olayın özelliği olarak kullanılabilir.
hide.bs.modal	`hide`Bu 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 `static`ve kipin dışında bir tıklama veya bir çıkış tuşuna basıldığında tetiklenir.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})