Bootstrap Modal

Örneğin Açıklaması

Modal'ı buton aracılığıyla etkinleştirme bölümünde:

Kalıcı pencereyi tetiklemek için bir düğme veya bağlantı kullanmanız gerekir.

Ardından iki data-* özniteliğini ekleyin:

• data-toggle="modal" modal pencereyi açar.

• data-target="#myModal" modal'ın ID'sine işaret ediyor.

Modal Bölümünde:

Modalın üst öğesi <div>, kipi ("myModal") tetiklemek için kullanılan data-target özniteliğinin değeriyle aynı olan bir kimliğe sahip olmalıdır.

.modal class, <div> içeriğini bir kip olarak tanımlar ve odağı ona getirir.

.fade class, modalı açıp kapatan bir geçiş efekti ekler. Bu etkiyi istemiyorsanız bu sınıfı kaldırın.

role="dialog" özelliği, ekran okuyucu kullanan kişiler için erişilebilirliği artırır.

.modal-dialog class, kipin uygun genişliğini ve kenar boşluğunu ayarlar.

Modal İçeriği Bölümünde:

class="modal-content" içeren <div>, modalı (kenarlık, arka plan rengi vb.) biçimlendirir. Bu <div> içinde, kipin üst bilgisini, gövdesini ve alt bilgisini ekleyin.

.modal-header class, kip başlığının stilini tanımlamak için kullanılır. <button> başlığın içinde, üzerine tıklarsanız modu kapatan bir data-dismiss="modal" özniteliği vardır.

.close class, kapat düğmesini biçimlendirir ve .modal-title sınıfı, başlığı uygun bir satır yüksekliğiyle biçimlendirir.

.modal-body class, kipin gövdesi için stili tanımlamak için kullanılır. Herhangi bir HTML işaretlemesini buraya ekleyin; paragraflar, resimler, videolar vb. 

.modal-footer class, kipin altbilgisi için stili tanımlamak için kullanılır. Bu alanın varsayılan olarak sağa hizalanmış olduğunu unutmayın.