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
- Form Elemanları: Modal içerisinde metin kutuları, onay kutuları ve butonlar gibi form elemanları bulundurabilir.
- Dinamik İçerik: Kullanıcı bilgilerini toplamak için modalın içeriğini dinamik hale getirebiliriz.
- 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-togglevedata-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.fadesı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.