Bootstrap 5 Modül

Modül

Modal bileşeni, mevcut sayfanın üstünde görüntülenen bir diyalog/popup penceresidir:

Modal nasıl oluşturulur

Aşağıda temel modal nasıl oluşturulacağını gösterilir:

Örnek

<!-- Button to open modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Modal aç
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal title -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Başlığı</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        Modal içeriği ..
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Kapat</button>
      </div>
    </div>
  </div>
</div>

Kişisel Olarak Deneyin

kullanın

Animasyon eklemek için .fade Sınıf, modali açarken ve kapatırken soluk eylemler eklemek için kullanılır：

Örnek

<!-- Fading modal -->
<div class="modal fade"></div>
<!-- Modal without animation -->
<div class="modal"></div>

Kişisel Olarak Deneyin

Modal Boyutu

küçük modal eklemek için .modal-sm sınıfı (max-width 300px) eklemek için büyük modal .modal-lg sınıfı (max-width 800px) veya büyük modal eklemek için .modal-xl modulün boyutunu değiştirmek için (max-width 1140 piksel).Varsayılan olarak 500 piksel en büyük genişlik.

Lütfen .modal-dialog Sınıf ve boyut sınıfları birlikte eklenir <div> Öğe：

Küçük Modal

<div class="modal-dialog modal-sm">

Kişisel Olarak Deneyin

Büyük Modal

<div class="modal-dialog modal-lg">

Kişisel Olarak Deneyin

Ekstra Büyük Modül

<div class="modal-dialog modal-xl">

Kişisel Olarak Deneyin

Varsayılan olarak, modülün boyutu "orta" (500px maksimum genişlik) olarak belirlenmiştir.

Tam Ekran Modül

Modülün sayfanın tüm genişliğini ve yüksekliğini kapsamasını istiyorsanız .modal-fullscreen Sınıfı:

Örnek

<div class="modal-dialog modal-fullscreen">

Kişisel Olarak Deneyin

Yanıt Veren Tam Ekran Modül

Ayrıca .modal-fullscreen-*-* Sınıf, modülün ne zaman tam ekran olarak gösterilmesi gerektiğini kontrol eder:

Sınıf Açıklama Örnek
.modal-fullscreen-sm-down 576px altında tam ekran Kişisel Olarak Deneyin
.modal-fullscreen-md-down 768px altında tam ekran Kişisel Olarak Deneyin
.modal-fullscreen-lg-down 992px altında tam ekran Kişisel Olarak Deneyin
.modal-fullscreen-xl-down 1200px altında tam ekran Kişisel Olarak Deneyin
.modal-fullscreen-xxl-down 1400px altında tam ekran Kişisel Olarak Deneyin

Ortalama Modül

Kullanarak .modal-dialog-centric Sınıfı, modülü sayfa içinde dikey ve yatay olarak ortalamak için kullanın:

Örnek

<div class="modal-dialog modal-dialog-centered">

Kişisel Olarak Deneyin

Kaydırılabilir Modül

Modülde çok içerik varsa, sayfaya bir kaydırma çubuğu ekler. Aşağıdaki örneği görmek için lütfen:

Örnek

<div class="modal-dialog">

Kişisel Olarak Deneyin

Ancak, .modal-dialog-scrollable Ekleme .modal-dialog Sadece modül içinde kaydırabilir, sayfa kendisi değil:

Örnek

<div class="modal-dialog modal-dialog-scrollable">

Kişisel Olarak Deneyin