Bootstrap Modal, kullanıcıların etkileşimde bulunabileceği, sayfanın geri kalanını geçici olarak kaplayan bir iletişim kutusudur. Modallar, genellikle kullanıcıdan bilgi almak, bildirimde bulunmak veya önemli içerikleri vurgulamak için kullanılır. Bootstrap ile modal bileşeni, hızlı bir şekilde oluşturulabilir ve özelleştirilebilir.
Bootstrap Modal Özellikleri
- Geçici Kaplama: Modal, arka planda kalan içeriği bulanıklaştırarak kullanıcı dikkatini çeker.
- Kolay Kapatma: Kullanıcılar, modali kapatmak için "X" butonuna tıklayabilir veya dış alana tıklayarak kapatabilir.
- Hızlı İçerik Değişimi: Modal içerikleri, AJAX veya JavaScript ile dinamik olarak güncellenebilir.
Kullanım Örneği
Aşağıda, Bootstrap Modal bileşenini kullanan basit bir örnek verilmiştir. Bu örnekte, bir butona tıklandığında modal iletişim kutusu açılmaktadır.
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>Bootstrap Modal Örneği</title>
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Modal Örneği</h2>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Modal Aç
</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">Modal Başlığı</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
Buraya modal içeriği yazılacak.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
<button type="button" class="btn btn-primary">Kaydet Değişiklikler</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:
-
<div class="modal-header">: Modal başlığı ve kapatma butonu burada yer alır. -
<div class="modal-body">: Kullanıcıya gösterilecek ana içerik burada bulunur. -
<div class="modal-footer">: Kapatma ve diğer eylem düğmeleri burada yer alır.
-
-
Önemli Notlar
- Modalın açılması ve kapanması için Bootstrap'ın JavaScript bileşenlerinin yüklenmesi gerekir.
- Modallar, duyarlı (responsive) tasarım için otomatik olarak boyutlandırılır ve ekran boyutuna göre uyum sağlar.
Bootstrap Modal, kullanıcı etkileşimini artırmak ve önemli bilgileri vurgulamak için etkili bir araçtır. Web uygulamalarınızda modallar kullanarak kullanıcı deneyimini geliştirebilir ve içeriklerinizi daha erişilebilir hale getirebilirsiniz.