PHPHocası Yazılım Akademisi
Bootstrap 5 Components 2026 Güncel

Bootstrap Bileşenler Modal 2

5 dk okuma süresi • 583 görüntülenme • 2024-10-06 • 4.9 (14 değerlendirme)

Bootstrap Modal bileşeninin ikinci örneği olarak, daha gelişmiş bir modal yapısı oluşturalım. Bu örnekte, form elemanları ekleyerek kullanıcıdan bilgi almak amacıyla kullanılacak bir modal tasarlayacağız. Böylece modalın nasıl etkileşimli hale getirileceğini ve kullanıcılardan veri toplayabileceğimizi göreceğiz.

Gelişmiş Bootstrap Modal Özellikleri

  1. Form Elemanları: Modal içerisinde metin kutuları, onay kutuları ve butonlar gibi form elemanları bulundurabilir.
  2. Dinamik İçerik: Kullanıcı bilgilerini toplamak için modalın içeriğini dinamik hale getirebiliriz.
  3. Geri Bildirim: Kullanıcı formu doldurduktan sonra bir onay mesajı veya bildirim gösterebiliriz.

Kullanım Örneği

Aşağıda, Bootstrap kullanarak form içeren bir modal örneği verilmiştir. Bu örnekte, bir butona tıklanıldığında modal açılır ve kullanıcıdan bilgi istenir.

HTML Kodu

 
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> <title>Gelişmiş Bootstrap Modal Örneği</title> </head> <body> <div class="container mt-5"> <h2>Gelişmiş Bootstrap Modal Örneği</h2> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Bilgi Girişi Yap </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">Bilgi Girişi</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div class="modal-body"> <form id="infoForm"> <div class="mb-3"> <label for="name" class="form-label">Adınız</label> <input type="text" class="form-control" id="name" required> </div> <div class="mb-3"> <label for="email" class="form-label">E-posta</label> <input type="email" class="form-control" id="email" required> </div> <div class="mb-3"> <label for="message" class="form-label">Mesaj</label> <textarea class="form-control" id="message" rows="3" required> </textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button> <button type="submit" class="btn btn-primary" form="infoForm">Gönder</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"> </script> </body> </html>

Açıklama

  • <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> : Bu buton, modalı açmak için kullanılır. data-bs-toggle ve data-bs-target özellikleri, butona tıklandığında hangi modalın açılacağını belirtir.
  • Modal Yapısı:
    • <div class="modal fade" id="exampleModal"> : Modal bileşenini tanımlar. fade sınıfı, modalın açıldığında yavaşça görünmesini sağlar.
    • Modal İçeriği:
      • <form id="infoForm"> : Modal içinde bir form tanımlar. Form, kullanıcıdan bilgi almak için kullanılır.
      • Form Elemanları:
        • Metin Kutusu: Kullanıcıdan adını girmek için bir metin kutusu.
        • E-posta Kutusu: Kullanıcıdan e-posta adresini almak için bir e-posta kutusu.
        • Textarea: Kullanıcıdan mesaj almak için bir metin alanı.
    • Modal Alt Bölümü: Kapatma ve gönderim butonları burada yer alır. form="infoForm" özelliği, gönder butonunun hangi formu göndereceğini belirtir.

Önemli Notlar

  • Formun içeriğini işlemek için JavaScript kullanabilirsiniz. Form gönderildiğinde, verileri doğrulamak veya işlemek için bir olay dinleyicisi eklemeyi unutmayın.
  • Modal, duyarlı (responsive) tasarım için otomatik olarak boyutlandırılır ve ekran boyutuna göre uyum sağlar.

Gelişmiş Bootstrap Modal, kullanıcıların içerik ile etkileşimde bulunmasını sağlarken, aynı zamanda bilgi toplamayı kolaylaştırır. Web uygulamalarınızda modallar kullanarak kullanıcı deneyimini geliştirebilir ve daha etkileşimli bir arayüz oluşturabilirsiniz.

Bu Dersi Değerlendirin

Bu ders size yardımcı oldu mu? Puan verin!

Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.

4.9 / 5 (Toplam 14 oy kullanıldı)

Sıkça Sorulan Sorular (SSS)

Bu ders ve konuyla ilgili en çok merak edilenler

Bootstrap Bileşenler Modal 2 dersini öğrenmek için ön koşul var mı?

Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.

Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?

Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.

Takıldığım bir yerde nereden soru sorabilirim?

Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.

Paylaş:
PHP Hocası Akademi
Önceki Ders Bootstrap Bileşenler Modal 1 Sonraki Ders Bootstrap Bileşenler Navbar

Topluluk Yorumları (0)

Ders Hakkında Yorum Yap veya Soru Sor

Henüz yorum yapılmamış. İlk yorumu siz yazın!