Modal Popup Nasıl Oluşturulur? / Bootstrap & jQuery & CSS

Web sitelerinde modal popup'lar çoğunlukla bülten kayıtları, bildirim ve uyarılar, kayıt ve giriş formları için kullanılır.

HTML, CSS ve JavaScript ile modal popup kurmanın birkaç yolu var. Bu rehber Bootstrap Modal Popup, jQuery Modal Popup ve CSS Modal Popup'ı sırayla, adım adım anlatıyor. Yanlarında yerel bir HTML <dialog> sürümü ve bir Tailwind CSS modalı da var. Aşağıdaki tüm kod örnekleri Ekim 2026'da güncellendi: jQuery'siz Bootstrap 5.3, Tailwind CSS v4 ve yalnızca açıkça "eski" diye işaretlenmiş bir jQuery seçeneği.

En sonda, kod yazmadan popup oluşturup yayınlamanın bir yolunu göstereceğim. Önce şuna bakalım: neden modal popup'ların kullanıldığını ve neden önemli olduklarını.

Modal Popup Nedir?

Bir modal popup veya diyalog kutusu, ziyaretçinin zaten bulunduğu sayfanın üzerinde açılan bir penceredir. Modal popup'ın faydası, sayfayı yeniden yüklemeden ek bilgi göstermesidir. Ziyaretçi ilgili bilgiyi popup kutusunda okur ve aynı sayfada kalır. Kullanıcı deneyimi de bundan kazançlı çıkar.

Onu modal yapan, kontrolü ele almasıdır: klavye odağı popup'ın içine geçer, arkadaki sayfaya tıklanamaz ya da Tab ile ulaşılamaz ve ziyaretçi geri dönmeden önce yanıt vermek ya da popup'ı kapatmak zorundadır. Arkadaki sayfa yerinde durur; karartılmış hâlde, ziyaretçinin bıraktığı yerde.

Bir modal, onu bir şey tetikleyene kadar görünmez. Tetiklendiğinde ziyaretçinin önüne tek bir çağrı ya da kayıt formu, uyarı gibi tek bir bilgi koyar.

Modal popup'ları pek çok yerde görürsünüz:

• Sorgulama/iletişim formları
• Potansiyel müşteri oluşturma/kayıt formları
• Giriş/kayıt formları
• Arama formları
• Uyarılar/bildirimler
• Yardım/ipuçları
• Tam ekran görüntü ve videoları gösterme

Popup'larınızı ne yapmalarını istediğinize göre kurun. Alpma, örneğin, ziyaretçilerin sitenin her yerinden oturum açmasına izin veriyor.

Popup'ların adı kötüye çıkmış. Yine de doğru kullanırsanız şu işlere yararlar:

• web sitenizin kullanılabilirliğini artırmak.
• yükleme sürelerini azaltmak.
• tüm tasarımları netleştirmek.

Modal ve modal olmayan popup'lar

"Popup" genel bir kelimedir; "modal" ise popup'ın nasıl davrandığını anlatır. Modal popup, ziyaretçi yanıt verene kadar sayfayı engeller. Kayan kutu, sabit çubuk ya da kısa bildirim gibi modal olmayan bir popup sayfanın bir bölümünün üzerinde belirir ve ziyaretçinin okumaya, kaydırmaya ve tıklamaya devam etmesine izin verir.

Ziyaretçinin vereceği tek bir karar varsa ve o karar verilene kadar sayfadaki başka hiçbir şey önemli değilse modalı seçin. Geri kalan her şey için modal olmayan bir format daha az böler. Formatların tam listesi için popup türleri rehberimize bakın.

Desteklediğimiz popup'larda ortalanmış format potansiyel müşteri toplamada iyi sonuç veriyor: Ortalanmış modal popup'lar, köşe/kayan kutulardaki %0,49'a karşı %0,88 dönüştürüyor (medyan kampanya) (Popupsmart popup kıyaslaması 2026). Bu, popup gösterimi başına bir oran ve modalı her yerde doğru cevap yapmıyor: bir modal yine de yarattığı kesintiyi hak etmek zorunda.

Modal popup'ı erişilebilir kılan nedir?

Erişilebilir bir modal popup dört şey yapar ve bu rehberdeki her kod örneği bunlara göre kontrol edildi. Bu davranışlar WAI-ARIA modal diyalog kalıbından gelir:

1. Odak modalın içine geçer: açıldığında ilk alanına ya da başlığına.
2. Tab içeride kalır. Arkadaki sayfa devre dışıdır, bu yüzden klavye karartılmış katmanın arkasına kaçamaz.
3. Escape modalı kapatır; aria-label="Kapat" gibi erişilebilir bir adı olan görünür bir kapatma düğmesi de.
4. Odak geri döner: modalı açan düğmeye, böylece ziyaretçi sayfanın en üstüne düşmez.

Bunun üzerine modalın bir rolü ve adı olmalı: aria-modal="true" ile birlikte role="dialog" ve başlığını gösteren aria-labelledby. showModal() ile açılan yerel <dialog> öğesi size rolü, devre dışı sayfayı, Escape tuşunu ve odağın taşınmasını hazır verir; MDN'nin dialog başvurusu tarayıcının neleri üstlendiğini listeler.

Kapatma düğmesi yalnızca ekran okuyucular için önemli değil. Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %40,5'i ziyaretçinin popup'ı kapatmasıyla bitiyor (tüm gösterimler toplu, Şubat 2025 - Eylül 2026, kapatma takibi başladığından beri) ve popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor. Kapatmak, insanların bir popup'la en sık yaptığı şey ve bu kararı hızlı veriyorlar.

Bootstrap Modal Popup

Modal, ziyaretçiden başka bir yere geçmeden önce bir şey yapmasını ister: bir uyarıyı okumasını ya da bir bilgiyi paylaşmasını.

Bootstrap'in modal eklentisi, modal popup'ları ve diyalog kutularını birkaç sınıfla kurar. Başlık, alt bilgi ve mesaj gövdesiyle kendi modal popup'ınızı nasıl oluşturacağınızı aşağıdaki örnekte görebilirsiniz. Ayrıntılı anlatım için buraya göz atabilirsiniz. Kod, jQuery'siz çalışan Bootstrap 5.3 için yazıldı (yazıldığı tarihte 5.3.8).

<!-- <head> içine -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<!-- Modalı açan düğme -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open the modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="myModalLabel">Confirmation</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Do you want to save changes you made to document before closing?</p>
        <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
      </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>

<!-- </body> öncesine -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Düğme, sizin hiç JavaScript yazmanıza gerek kalmadan modalı açar. Bootstrap açılışta role="dialog" ve aria-modal="true" ekler, odağı içeride tutar, modalı Escape ile, arka plana tıklamayla ve data-bs-dismiss="modal" taşıyan her öğeyle kapatır ve kapanınca odağı düğmeye geri verir.

Tıklama olmadan açmak için bunu Bootstrap betiğinden sonra ekleyin. Tarayıcı sayfanın “belge nesne modeli”ni yükler yüklemez modal kendiliğinden açılır:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const modal = new bootstrap.Modal("#myModal");
    modal.show();
  });
</script>

Üç seçenek daha gerçek projelerin çoğunu karşılar:

• Modal açılınca bir alana odaklanın. HTML autofocus özniteliği Bootstrap modalının içinde işe yaramaz; bu yüzden Bootstrap'in shown.bs.modal olayını dinleyin ve girişte focus() çağırın.
• Yanıtı zorunlu kılın. data-bs-backdrop="static", arka plana tıklamanın modalı kapatmasını engeller. data-bs-keyboard="false" ayarını yalnızca modal gerçekten kapatılamayacaksa ekleyin (kaydedilmemiş değişiklik uyarısı gibi) ve kapatma düğmesini bırakın.
• Uzun içerik. Gövdenin modalın içinde kaymasını istiyorsanız modal-dialog-centered yanına modal-dialog-scrollable ekleyin.

const myModal = document.getElementById("myModal");
const myInput = document.getElementById("myInput");

myModal.addEventListener("shown.bs.modal", () => {
  myInput.focus();
});

Eski bir Bootstrap 3 ya da 4 modalını yükseltiyorsanız, onu bozan değişiklikler şunlar:

Boyutlardan tam ekran modallara ve modal içindeki formlara kadar bileşenin tamamı için Bootstrap popup rehberimizi ve resmi Bootstrap 5.3 modal belgelerini okuyun.

HTML dialog modal popup (vanilla JavaScript)

Yerel <dialog> öğesi, 2026'da modal popup oluşturmanın en basit doğru yoludur: kütüphane yok ve zor kısımları tarayıcı üstlenir. showModal() çağırdığınızda arkadaki sayfa devre dışı kalır, odak içeri geçer ve Escape modalı kapatır. Kapandığında tarayıcılar odağı, modal açılmadan önce odaklanmış olan öğeye geri gönderir.

<button type="button" id="open-offer">Teklifi al</button>

<dialog id="offer" class="modal" aria-labelledby="offer-title">
  <div class="modal-box">
    <h2 id="offer-title">İlk siparişinizde kargo bedava</h2>
    <p>Listemize katılın, kodu e-postanıza gönderelim.</p>

    <form action="/subscribe" method="post">
      <label for="offer-email">E-posta adresi</label>
      <input id="offer-email" name="email" type="email" autocomplete="email" required autofocus>
      <button type="submit">Kodumu gönder</button>
    </form>

    <form method="dialog">
      <button type="submit" class="modal-close" aria-label="Kapat">&times;</button>
    </form>
  </div>
</dialog>

<script>
  const offer = document.getElementById("offer");

  document.getElementById("open-offer").addEventListener("click", () => {
    offer.showModal();
  });

  // Karartılmış arka plana yapılan tıklama .modal-box'a değil, <dialog>'un kendisine düşer
  offer.addEventListener("click", (event) => {
    if (event.target === offer) offer.close();
  });
</script>

.modal {
  padding: 0;
  border: 0;
  border-radius: 12px;
  width: calc(100% - 2rem);
  max-width: 28rem;
}
.modal::backdrop {
  background: rgb(0 0 0 / 0.5);
}
.modal-box {
  position: relative;
  padding: 1.5rem;
}
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 1.5rem;
  line-height: 1;
}
/* Modal açıkken arkadaki sayfanın kaymasını durdurur */
body:has(dialog[open]) {
  overflow: hidden;
}

Parçalar nasıl çalışıyor:

• <form method="dialog"> düğmesine basıldığında dialog'u JavaScript'siz kapatır.
• E-posta alanındaki autofocus, imleci ziyaretçinin yazması beklenen yere koyar. MDN, ziyaretçinin ilk kullanacağı öğede kullanılmasını önerir.
• İç .modal-box dolguyu taşır. O olmadan popup'ın kendi dolgusuna yapılan bir tıklama da dialog'a tıklama sayılır ve onu kapatır.
• ::backdrop, tarayıcının dialog'un arkasına çizdiği karartılmış katmanı biçimlendirir.

Yeni tarayıcılar <dialog> üzerinde closedby="any" özniteliğini de destekler; bu, betiğe gerek kalmadan arka plana tıklamayla kapatır. Ziyaretçilerinizin kullandığı her tarayıcıda çalışana kadar tıklama dinleyicisini koruyun.

Formu kısa tutun. Bir veya iki alan isteyen popup'lar %0,88 ve %0,94 dönüştürüyor, üç alanda bu oran %0,56 (medyan kampanya; çarkıfelek ve diğer oyunlaştırılmış popup'lar ayrı sayıldı).

Aynı öğe buton ile açılan bir popup için de çalışır; o rehber tıklamayla açılan popup'ları daha ayrıntılı anlatıyor.

jQuery Modal Popup

jQuery modal dialog kutusu bilgiyi hızlıca gösterir. Özenle kurarsanız kullanıcılarınızı uyarmak ya da onlara hata göstermek için kullanabilirsiniz; her modern modal bu işi yapar.

jQuery örneği aşağıda. jQuery 3.x ve 4.0 ile çalışır. jQuery size dört erişilebilirlik davranışının hiçbirini vermez, bu yüzden betik bunları ekler: modalı açan düğmeyi hatırlar, arkadaki sayfayı devre dışı bırakır, Escape ve arka plana tıklamayla kapatır ve kapanınca odağı geri verir. inert'in çalışması için sayfa içeriği <main> içinde, modal ise onun dışında olmalı.

<main>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <button type="button" id="open-modal">Click me</button>
</main>

<div id="modal" class="jq-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
  <div class="jq-modal-box">
    <h2 id="modal-title">Modal title</h2>
    <p>This modal popup opened with jQuery.</p>
    <button type="button" class="jq-modal-close">Close</button>
  </div>
</div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"
  integrity="sha384-fgGyf7Mo7DURSOMnOy7ed+dkq5Job205Gnzu6QIg0BOHKaqt4D76Dt8VlDCzcMHV" crossorigin="anonymous"></script>
<script>
$(function () {
  var $modal = $("#modal");
  var $opener = null;

  function openModal() {
    $opener = $(document.activeElement);
    $modal.prop("hidden", false);
    $("main").attr("inert", "");
    $modal.find("button, [href], input, select, textarea").first().trigger("focus");
  }

  function closeModal() {
    $modal.prop("hidden", true);
    $("main").removeAttr("inert");
    if ($opener) $opener.trigger("focus");
  }

  $("#open-modal").on("click", openModal);
  $modal.on("click", ".jq-modal-close", closeModal);
  $modal.on("click", function (event) {
    if (event.target === this) closeModal();
  });
  $(document).on("keydown", function (event) {
    if (event.key === "Escape" && !$modal.prop("hidden")) closeModal();
  });
});
</script>

.jq-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.5);
}
/* display: grid, hidden özniteliğini ezer; bu yüzden yeniden belirtin */
.jq-modal[hidden] {
  display: none;
}
.jq-modal-box {
  width: calc(100% - 2rem);
  max-width: 28rem;
  padding: 1.5rem;
  border-radius: 8px;
  background: #fff;
}

Bundan sonra, düğmeye tıklamak sayfayı karartır ve modalı açar; Escape, Close düğmesi ya da karartılmış alana bir tıklama onu kapatır. Eski bir siteyi jQuery 4'e taşıyorsanız, jQuery 4.0 yükseltme rehberi kaldırılan yöntemleri listeler.

CSS Modal Popup Penceresi

CSS, HTML öğelerinin ekranda nasıl görüntüleneceğini tanımlayan bir dildir. O yüzden önce HTML'ye, sonra CSS'e bakıyoruz.

Yalnızca CSS ile yapılan bir modal :target sözde sınıfını kullanır: bağlantı URL'yi #open-modal olarak değiştirir ve CSS o kimliğe sahip öğeyi gösterir.

<div class="container">
  <div class="interior">
    <a class="btn" href="#open-modal">Basic CSS-Only Modal</a>
  </div>
</div>
<div id="open-modal" class="modal-window" role="dialog" aria-labelledby="open-modal-title">
  <div>
    <a href="#" title="Close" class="modal-close">Close</a>
    <h1 id="open-modal-title">Hello!</h1>
    <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
  </div>
</div>

Ardından CSS'i ekleyin. Aşağıdaki iç içe yazım (&:target, & > div) yerel CSS iç içe yazımıdır; güncel tarayıcıların hepsi destekler, bu yüzden artık Sass gerekmez.

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
  &:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  & > div {
    width: 400px;
    max-width: calc(100% - 2rem);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: #ffffff;
    color: #333333;
  }
  & header {
    font-weight: bold;
  }
  & h1 {
    font-size: 150%;
    margin: 0 0 15px;
    color: #333333;
  }
}

.modal-close {
  color: #333333;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: #000;
  }
}

/* Demo Styles */

html,
body {
  height: 100%;
}

body {
  font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background-color: #f69d75;
  color: #555555
}

a {
  color: inherit;
}

.container {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.btn {
  background-color: #fff;
  padding: 1em 1.5em;
  border-radius: 3px;
  text-decoration: none;
}

Sonuç şöyle görünür:

Bu örneğin ilk sürümüne göre iki değişiklik önemli: visibility: hidden, kapalı modalın Close bağlantısını Tab sırasının dışında tutar (yalnızca opaklık onu odaklanabilir bırakıyordu) ve geçiş all yerine özelliklerini adıyla belirtir.

Tailwind CSS ile modal popup

Tailwind CSS bir modal bileşeniyle gelmez: modalı yardımcı sınıflarla siz biçimlendirirsiniz. En temiz temel yine <dialog> öğesidir; size ek JavaScript olmadan odak yönetimi ve Escape verir. Aşağıdaki örnek Tailwind CSS v4 için yazıldı (yazıldığı tarihte 4.3). İlk satırdaki Play CDN betiği denemek içindir; canlı sitede Tailwind'i derleme aracınızla kurun.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<button id="open-tw-modal" type="button"
  class="rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
  Teklifi al
</button>

<dialog id="tw-modal" aria-labelledby="tw-modal-title"
  class="m-auto w-[calc(100%-2rem)] max-w-md rounded-xl bg-white p-0 shadow-xl backdrop:bg-black/50">
  <div class="relative p-6">
    <h2 id="tw-modal-title" class="pr-8 text-xl font-semibold text-gray-900">
      İlk siparişinizde kargo bedava
    </h2>
    <p class="mt-2 text-gray-700">Listemize katılın, kodu e-postanıza gönderelim.</p>

    <form class="mt-5 space-y-3" action="/subscribe" method="post">
      <label for="tw-email" class="block text-sm font-medium text-gray-900">E-posta adresi</label>
      <input id="tw-email" name="email" type="email" autocomplete="email" required autofocus
        class="w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-600 focus:ring-2 focus:ring-blue-600/30 focus:outline-none">
      <button type="submit"
        class="w-full rounded-lg bg-blue-600 px-4 py-2.5 font-medium text-white hover:bg-blue-700">
        Kodumu gönder
      </button>
    </form>

    <form method="dialog">
      <button type="submit" aria-label="Kapat"
        class="absolute top-3 right-3 rounded-md p-1 text-gray-700 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue-600">
        <span aria-hidden="true" class="block text-2xl leading-none">&times;</span>
      </button>
    </form>
  </div>
</dialog>

<script>
  const twModal = document.getElementById("tw-modal");

  document.getElementById("open-tw-modal").addEventListener("click", () => {
    twModal.showModal();
  });

  twModal.addEventListener("click", (event) => {
    if (event.target === twModal) twModal.close();
  });
</script>

Onu modal yapan sınıflar:

• m-auto dialog'u ortalar. Tailwind'in Preflight katmanı her öğeye margin: 0 verir ve bu, tarayıcının <dialog>'u kendiliğinden ortalamasını kaldırır; m-auto olmadan modal sol üst köşeye yapışır. Bir Tailwind modalının "çalışmamasının" en yaygın nedeni budur.
• backdrop:bg-black/50, karartılmış katmanı ::backdrop sözde öğesini hedefleyen backdrop: varyantıyla biçimlendirir (Tailwind'in varyant başvurusu onu listeler).
• w-[calc(100%-2rem)] max-w-md telefonlarda kenar boşluğu bırakır ve masaüstünde genişliği sınırlar.
• İç sarmalayıcıdaki relative p-6 dolguyu taşır, böylece popup'ın kenarına yapılan bir tıklama arka plan tıklaması sayılmaz, ve absolute kapatma düğmesine dayanak olur.

Tailwind v3.1 ve sonrasında aynı işaretleme tek bir değişiklikle çalışır: v3'te outline-2 yalnızca kalınlığı ayarlar, bu yüzden iki düğmede focus-visible:outline focus-visible:outline-2 yazın. backdrop: varyantı v3.1'de geldi; daha eski sürümlerde dialog::backdrop'u CSS dosyanızda biçimlendirin.

React, Vue ve diğer framework'lerde modal popup'lar

Framework'ler durumun nerede tutulduğunu değiştirir, bir modalın yapması gerekenleri değil. React'te bir isOpen durumu tutun ve true olduğunda bir <dialog> ref'i üzerinde showModal() çağırın; Vue 3'te aynısını bir şablon ref'i ve <Teleport to="body"> ile yapın, böylece modal overflow: hidden taşıyan ya da kendi yığılma bağlamı olan bir üst öğenin içinde sıkışmaz. İkisi için adım adım kod React popup rehberimizde ve Vue modal ve popup rehberimizde var. WordPress'te kodun temada nereye gideceğini WordPress'te eklenti kullanmadan popup rehberi gösteriyor.

Ne Öneriyoruz? Popupsmart: Basit Bir Popup Oluşturma Hizmeti

Modal popup'ı elle kodlayıp istediğiniz amaçla sayfanın istediğiniz yerine koyabilirsiniz. Daha basit bir yol da var.

Akıllı popup oluşturucu Popupsmart, kurulumu sizin yerinize yapar. İşe popup'ın ne için olduğuna karar vererek başlayın: satış dönüşümünü artırmak, e-posta listenizi büyütmek ya da telefon çağrılarını artırmak. Hedefi seçtikten sonra şu adımlara geçin:

Popupsmart embed kodunu bir kez ekleyin (sonrasında kod yok)

Geliştirici değil de pazarlamacıysanız, yukarıdaki kodların hiçbirine ihtiyacınız yok. Popupsmart popup'ları sitenize bir kez yapıştırılan tek bir embed koduyla ekler:

1. Kaydolun (Popupsmart'ın 0 $ ücretsiz planı var) ve panelin sol çubuğunda Embed Code'a tıklayın.
2. Kodu kopyalayın. data-id içinde kendi hesap kimliğinizle şöyle görünür:

<script src="https://cdn.popupsmart.com/bundle.js" data-id="YOUR_ACCOUNT_ID" async defer></script>

3. Kodu sitenizin şablonunda kapanış </body> etiketinin hemen önüne yapıştırın ya da Google Tag Manager veya CMS'iniz üzerinden ekleyin. Her siteye bir kez ekleyin.
4. Websites altında alan adınızı ekleyip doğrulayın, ardından modalınızı tasarlayıp yayınlayın.

Bundan sonra her yeni modal, kayan kutu ya da çubuk panelde oluşturulup yayınlanır, yeni kod gerekmez. Yardım merkezindeki embed kodu sitenize nasıl yerleştirilir makalesi her platform için ayrıntıları veriyor. Bir Popupsmart modalını zamanlayıcı yerine kendi düğmenizden açmak için On-Click Targeting'i kullanın; buton ile açılan popup rehberimiz bunu anlatıyor.

Popupsmart'ın Tasarımı

İşe hazır bir şablonla başlarsınız. Kitlenize bir "Duyuru Popup'ı" ile yol göstermek istiyorsanız şunu seçebilirsiniz:

Ya da bir "Ürün Tanıtım Popup'ı" ile satış dönüşümünü artırmak istiyorsanız, popup'ınız şöyle olabilir:

Daha fazlasına popup şablonlarımızdan göz atabilirsiniz.

Popupsmart’ın Gösterimi

Mesajınızı ziyaretçinin sitede yaptıklarına göre uyarlayabilirsiniz. Bu da dönüşüme, etkileşime ve satışa yarar. Popupsmart'ın tek embed kodu, hangi platformla kurulmuş olursa olsun betik ekleyebildiğiniz her sitede çalışır.

Popupsmart Entegrasyon Sistemi

Hedefinizi ve ona uyan şablonu seçtikten sonra popup'ı Popupsmart panelinde özelleştirip yayınlarsınız. Bu aşamada hiç kodla uğraşmazsınız.

Sıkça Sorulan Sorular

Modal popup nedir?

Modal popup, bir web sayfasının üzerinde açılan ve ziyaretçi yanıt verene ya da onu kapatana kadar arkadaki sayfayı engelleyen bir diyalog kutusudur. Klavye odağı popup'ın içine geçer, arkadaki sayfaya tıklanamaz ve popup bir kapatma düğmesiyle ya da Escape tuşuyla kapanır.

Modal ile popup arasındaki fark nedir?

Popup, sayfanın üzerinde beliren her şeyi kapsayan genel bir kelimedir. Modal, ziyaretçi yanıt verene kadar sayfayı engelleyen türdür. Kayan kutu, sabit çubuk ya da kısa bildirim gibi modal olmayan bir popup ise açıkken sayfayı kullanılabilir bırakır.

Bootstrap modal için hâlâ jQuery gerekir mi?

Hayır. Bootstrap 5 jQuery'yi bıraktı. Modal, Bootstrap'in kendi JavaScript paketiyle çalışır: düğmede data-bs-toggle ve data-bs-target kullanın ya da düz JavaScript'te new bootstrap.Modal('#myModal').show() yazın. data-toggle ve $('#myModal').modal('show') sözdizimi Bootstrap 4 ve öncesine aittir.

Modal popup nasıl erişilebilir yapılır?

Modal açıldığında klavye odağını içine taşıyın, açıkken Tab'ı içeride tutun, Escape tuşuyla ve görünür bir kapatma düğmesiyle kapanmasını sağlayın ve odağı onu açan düğmeye geri gönderin. Modala aria-labelledby ile bir ad verin. showModal() ile açılan HTML dialog öğesi bunların çoğunu sizin yerinize yapar.

Ziyaretçi dışarı tıkladığında modal popup nasıl kapatılır?

Bootstrap, arka plana tıklandığında varsayılan olarak kapanır. HTML dialog öğesinde dialog'a gelen tıklamaları dinleyin ve event.target dialog'un kendisiyse kapatın; tıklama arka plana denk geldiğinde böyle olur. İçeriği dolguyu taşıyan bir iç sarmalayıcıya koyun ki popup'ın kendi kenarına yapılan tıklamalar sayılmasın.

Tailwind CSS ile modal popup nasıl yapılır?

HTML dialog öğesini kullanın, yardımcı sınıflarla biçimlendirin ve showModal() ile açın. m-auto ekleyin, çünkü Tailwind'in Preflight katmanı her öğeye margin: 0 verir ve tarayıcının ortalamasını kaldırır. Karartılmış katmanı backdrop: varyantıyla biçimlendirin, örneğin backdrop:bg-black/50.

Modal popup sayfa yüklendiğinde açılabilir mi?

Evet. Bootstrap 5'te sayfa hazır olduğunda new bootstrap.Modal('#myModal').show() çağırın; dialog öğesinde showModal() çağırın. Popupsmart'ın 2026 kıyaslamasına göre görünmeden önce bekleyen popup'lar, sayfa yüklenir yüklenmez gösterilenlere karşı %0,83'e %0,61 dönüştürüyor (medyan kampanya), ancak fark istatistiksel olarak güvenilir değil, bu yüzden bir kural değil, eğilim olarak okuyun.

Kod yazmadan modal popup oluşturabilir miyim?

Evet. Popupsmart gibi bir popup oluşturucu, modalı tasarlamanızı, ne zaman ve kime görüneceğini seçmenizi ve tek bir embed koduyla sitenize eklemenizi sağlar. Popupsmart'ın 0 $ ücretsiz planı var.