Oluşturduğumuz web sitesi ilk açıldığında kullancılara bilgi verebilmek için popup çok önemlidir. Web sayfası açılışında popup açma yöntemi ile kullanıcıları sitenizde daha uzun tutabilir ve yenilikleri, haberleri ve yeni ürünler hakkında bilgilendirmeler verebilirsiniz. Web sayfası açılışında popup açma uygulamasını JavaScript ile yapacağız. Sizi fazla tutmadan aksiyonlara geçelim.
Adım 1: Bootstrap 5 kütüphanemizi dahil edelim
Boostrap modal özelliğini kullanabilmemiz için kütüphaneyi projemize dahil ettik.
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
Adım 2: Modal kodlarımızı ekleyelim
Şimdiyse Bootsrap modal özelliğimi <body> etiketleri arasına ekleyelim.
<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 title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Adım 3: Popup açılış aksiyonumuzu alalım
Kullanıcı web sitesine girdiği andan itibaren popup otomatik açılma aksiyonunu JavaScript ile alalım. </body> kapanış etiketimizin bir üstüne JavaScript kodlarımızı yazıyoruz.
<script type="text/javascript">
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
myModal.show();
};
</script>
Beni dinlediğiniz için teşekkür ederim. Ayrıca snackbar.js kullanımı, Toast Message yapımı adlı yazımızı da okuyabilirsiniz.
Yorumlar (0)