Sayfa açılışında otomatik popup

JavaScript Trend Makale

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)

    Bu yazıya henüz bir yorum yapılmamış! İlk yorum yapan sen ol!