Merhabalar,
Bu yazımda siteniz ana sayfasına girildiğinde otomatik olarak nasıl Bootstrap Modal açılır konusundan bahsedeceğim.
Yazımda Bootstrap 5 sürümünü kullanacağım. Aşağıya sitenize çağırmanız gereken Css ve Javascript bağlantılarını bırakıyorum;
<!-- <head> etiketi arasına Css dosyasını ekliyoruz -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- <head> bitiş -->
<!-- </body> etiketi bitişinden hemen önce aşağıdaki dosyalari çağırıyoruz -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>Eklediğimiz şu an için beta sürümleri, ilerde güncel dosyaları çekmek için Bootstrap Download sayfasını takip edebilirsiniz.
Biliyorsunuz Bootstrap 5 sürümü ile Jquery eklemenizi zorunlu kılmıyor fakat site açılışında tetiklememiz için Jquery dosyasını da çağırdık.
Şimdi modal yapısını ekleme aşamasına geldik. Bootstrap Modal sayfasını ziyaret edip kodları kopyalayıp içeriklerinizi kendinize göre özelleştirebilirsiniz.
<div class="modal fade" id="fgModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal Başlığı</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
İçerik alanı..
</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">Anladım.</button>
</div>
</div>
</div>
</div> Yukarıda örnek bir modal kodu bulunmaktadır. Dediğim gibi linke tıklayarak çeşitli seçeneklerden size uygun olan (Örn: kaydırma çubuğu, daha büyük açılır pencere) gibi özellikli olan kodları da alabilirsiniz.
Şimdi sıra geldi bunu ana sayfanıza girildiğinde otomatik olarak açmaya;
<script type="text/javascript">
// sayfa yüklendiğinde fonkiyonu çalıştır.
$(window).on('load', function() {
// fonksiyon içinde, modalı görünür olacak şekilde ayarla
$('#fgModal').modal('show');
// Html tarafında ve burada verilen id'lerin aynı olmasına dikkat edin
});
</script> Evet ana sayfa dosyanızda Jquery çağırdığınız satırın altında olacak şekilde, yukarıdaki script etiketini yerleştirmeniz istediğiniz sonuca ulaşmanızı sağlayacaktır. Sayfa yüklendiğinde çalışacaktır.
Burada en önemli nokta id değerlerinin eşleşmiş olmasıdır. Umarım işinize yarar.
Mutlu Kodlamalar 🙂
