Açılır Pencere Kodu: HTML, CSS ve JavaScript ile 5 Hazır Örnek

Açılır pencere (pop-up) kodu, sayfanın üzerinde bir kutu içinde mesaj, duyuru veya form göstermeye yarayan HTML, CSS ve JavaScript kodudur. 2026’da bunun en doğru yolu, tarayıcıların yerleşik olarak desteklediği <dialog> elementidir. Eklentiye gerek kalmadan erişilebilir bir pencere açar, Esc tuşuyla kapanır ve arka planı otomatik karartır. Aşağıda kopyalayıp kullanabileceğiniz 5 hazır kod var: dialog ile açılır pencere, yalnızca CSS ile açılır pencere, ziyaretçiye bir kez gösterilen pop-up, tıklayınca açılan yazı ve açılır menü.

1. dialog Elementi ile Açılır Pencere (Önerilen)

Butona tıklanınca açılan, Esc tuşu veya × ile kapanan pencere. Aynı sayfada birden fazla pencere için yeni bir <dialog> ekleyip butonun data-popup değerini o pencerenin id‘si yapmanız yeterli.
HTML ve JavaScript:

<button type="button" class="popup-ac" data-popup="duyuru">Duyuruyu Gör</button>

<dialog id="duyuru" class="popup">
  <form method="dialog">
    <button class="popup-kapat" aria-label="Kapat">&times;</button>
  </form>
  <h2>Kampanya Başladı</h2>
  <p>Tüm ürünlerde kargo bu hafta ücretsiz.</p>
</dialog>

<script>
document.querySelectorAll('[data-popup]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    document.getElementById(btn.dataset.popup).showModal();
  });
});
</script>

CSS:

.popup { max-width: 480px; width: 90%; border: 0; border-radius: 12px; padding: 24px; }
.popup::backdrop { background: rgba(0, 0, 0, .6); }
.popup-kapat { float: right; font-size: 28px; line-height: 1; background: none; border: 0; cursor: pointer; }

::backdrop seçicisi pencerenin arkasındaki karartmayı belirler. <form method="dialog"> içindeki buton, ek kod yazmadan pencereyi kapatır.

2. JavaScript Olmadan, Sadece CSS ile Açılır Pencere

Bağlantıya tıklandığında adres çubuğuna #popup1 eklenir ve CSS’teki :target seçicisi pencereyi görünür yapar. JavaScript eklemenin mümkün olmadığı ortamlarda işe yarar.

<a href="#popup1" class="buton">Açılır Pencereyi Aç</a>

<div id="popup1" class="overlay">
  <div class="kutu">
    <a href="#" class="kapat" aria-label="Kapat">&times;</a>
    <h2>Bilgilendirme</h2>
    <p>Bu pencere JavaScript olmadan, sadece CSS ile açılır.</p>
  </div>
</div>

.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .7);
  visibility: hidden; opacity: 0; transition: opacity .3s; z-index: 9999; }
.overlay:target { visibility: visible; opacity: 1; }
.kutu { background: #fff; max-width: 480px; width: 90%; margin: 15vh auto;
  padding: 24px; border-radius: 12px; position: relative; }
.kapat { position: absolute; top: 12px; right: 18px; font-size: 28px; text-decoration: none; color: #333; }

Bu yöntemin dezavantajı, Esc tuşuyla kapanmaması ve tarayıcının geri tuşunun pencereyi tekrar açabilmesidir.

3. Bir Defa Açılan Pop-up Kodu

Sayfa açıldıktan 5 saniye sonra gösterilen ve ziyaretçinin tarayıcısına kaydedildiği için bir daha açılmayan duyuru penceresi. CSS olarak 1. örnekteki stil kullanılabilir.

<dialog id="tek-sefer" class="popup">
  <form method="dialog">
    <button class="popup-kapat" aria-label="Kapat">&times;</button>
  </form>
  <h2>Yeni rehberimiz yayında</h2>
  <p>Bu duyuruyu yalnızca bir kez göreceksiniz.</p>
</dialog>

<script>
(function () {
  var anahtar = 'tekSeferPopupGosterildi';
  try { if (localStorage.getItem(anahtar)) return; } catch (e) {}
  setTimeout(function () {
    var d = document.getElementById('tek-sefer');
    if (d && d.showModal) d.showModal();
    try { localStorage.setItem(anahtar, '1'); } catch (e) {}
  }, 5000);
})();
</script>

Süreyi değiştirmek için 5000 değerini (milisaniye) değiştirin. Duyuruyu yeniden göstermek istediğinizde anahtar değişkeninin adını değiştirmeniz yeterlidir; herkes pencereyi bir kez daha görür.

4. Tıklayınca Açılan Yazı (HTML details)

Sık sorulan sorular ve akordeon menüler için en sade çözüm. Hiç JavaScript gerekmez ve içerik sayfanın HTML’inde bulunduğu için Google tarafından okunabilir.

<details>
  <summary>Kargo ne kadar sürede gelir?</summary>
  <p>Siparişleriniz 1-3 iş günü içinde kargoya verilir.</p>
</details>

Açık başlamasını istiyorsanız <details open> yazın.

5. Açılır Menü Kodu (Dropdown)

Fareyle üzerine gelindiğinde veya klavyeyle odaklanıldığında alt menüsü açılan basit bir menü:

<nav class="menu">
  <ul>
    <li><a href="/">Ana Sayfa</a></li>
    <li class="alt">
      <a href="/hizmetler/">Hizmetler</a>
      <ul>
        <li><a href="/seo/">SEO</a></li>
        <li><a href="/icerik/">İçerik</a></li>
      </ul>
    </li>
  </ul>
</nav>

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.menu .alt { position: relative; }
.menu .alt ul { display: none; position: absolute; top: 100%; left: 0;
  background: #fff; flex-direction: column; padding: 8px 0; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.menu .alt:hover ul,
.menu .alt:focus-within ul { display: flex; }
.menu .alt ul a { display: block; padding: 8px 16px; }

:focus-within sayesinde menü klavyeyle gezinen kullanıcılar için de açılır.

Kodlar WordPress’e Nasıl Eklenir?

• HTML: Blok düzenleyicide Özel HTML bloğuna, Klasik Düzenleyicide Metin sekmesine yapıştırın.
• CSS: Görünüm > Özelleştir > Ek CSS bölümüne ekleyin.
• JavaScript: Yalnızca bir sayfada kullanacaksanız HTML ile birlikte aynı bloğa ekleyebilirsiniz. Tüm sitede kullanacaksanız tema ayarlarındaki alt bilgi (footer) kod alanına ya da bir kod yönetim eklentisiyle ekleyin.

Butonlara bağlantı verme hakkında: HTML butona link nasıl verilir?

Pop-up’lar SEO’yu Etkiler mi?

Evet, yanlış kullanılırsa. Google, mobilde kullanıcının arama sonucundan geldiği anda içeriğe ulaşmasını zorlaştıran araya giren pencereleri (intrusive interstitials) kullanıcı deneyimini bozan bir uygulama olarak değerlendirir. Google’ın istisna saydığı durumlar şunlardır: çerez kullanımı gibi yasal bildirimler, yaş doğrulama pencereleri, ücretli içerik için giriş ekranları ve ekranın makul bir kısmını kaplayan bantlar.

İyi uygulamalar:

• Pencereyi sayfa açılır açılmaz değil, kullanıcı biraz ilgi gösterdikten sonra veya bir butona tıklayınca açın.
• Kapatma düğmesini büyük ve görünür yapın; Esc tuşuyla da kapanabilsin.
• Aynı ziyaretçiye her sayfada tekrar göstermeyin (3. örnekteki gibi).
• Mobilde tam ekran yerine küçük bir alt bant tercih edin.

Chrome’da Açılır Pencere Bildirimi Nasıl Açılır veya Kapatılır?

Bir sitede açılır pencerelerin engellendiğine dair uyarı görüyorsanız veya pop-up’lara izin vermek istiyorsanız:

1. Chrome’da sağ üstteki üç noktaya tıklayıp Ayarlar‘ı açın.
2. Gizlilik ve güvenlik > Site ayarları bölümüne gidin.
3. Pop-up’lar ve yönlendirmeler seçeneğini açın.
4. Varsayılan davranışı seçin veya belirli bir siteyi izin verilenler listesine ekleyin.

Tek bir site için adres çubuğunun sağında beliren engellenmiş pencere simgesine tıklayarak da izin verebilirsiniz.
Diğer site izinlerini (bildirim, çerez, JavaScript) ve engellerin kaynağını bulmayı Chrome’da site engelleme kaldırma yazısında anlattım.

Sıkça Sorulan Sorular