CodeCillop > JavaScript > CodeCillop Muhteşem Popup
codecillop-muhtesem-popup

CodeCillop Muhteşem Popup

Masaüstü, mobil cihazlar, tablet bilgisayarlara uyumlu sayfa içi içerik kutusu

Bütün ihtiyaçlarınız bir arada. Sayfa içinde lightbox (estetik popup) içerikler göstermek istiyorsunuz ama bütün cihazlara da uyumlu olsun diyorsunuz. İçeriğine göre otomatik şekil alan CodeCillop Muhteşem Popup ile tanışın.

Özellikler

  • Sayfa içinde #id’li bağlantıları popup da gösterme
  • Harici bağlantıları ya da bağlantı içindeki #id’li içerikleri gösterme
  • Harici bağlantıları istenirse iframe içinde gösterme ve iframe boyutunu ayarlayabilme
  • Cihaza ve içeriğine göre otomatik boyutlanma (Tüm masaüstü, dizüstü, akıllı telefon ve tablet cihazlara uyumlu)
  • Ekrana sığınca ortalanır, sığmazsa otomatik pozisyon ayarlar
  • Ekran yeniden boyutlandırıldığında (mobil cihaz yatay dikey değiştirildiğinde) otomatik ayarlanır.
  • ESC tuşu ile kapatılabilir
  • Responsive & Fluid uyumlu
  • CSS ile şekillendirme ve kişiselleştirme, görsel kullanımı yok – sıfır görsel –
  • Her bir popup için farklı biçimlendirme yapabilme imkanı
  • 9 KB’dan az dosya boyutu

Varsayılan kullanım

Sayfanızda <head> </head> aralığına aşağıdaki gibi scripti yerleştirmeniz gerekir. İndirdiğiniz dosyalar içinde CSS kodlarından gerekli alanları da kullanmalısınız.

<script src="codecillop-muhtesempoap.v1.4.1.js"></script>

Sayfa içinde çapalı bağlantı verilen nesneyi popup içine alma:

<a href="#kutu" class="popup">Popup Açan Bağlantı</a>
<div id="kutu">Popup içeriği. HTML, görsel, nesne, video v.s.</div>

Pencerenin azami genişliğini ayarlama (CSS; max-width). Ekrana sığmadığı durumlarda otomatik ayarlanır. Aşağıda pencere genişliği azami 400 piksel olarak ayarlanmıştır.

<a href="#kutu" class="popup" data-maksgen="400">Popup Açan Bağlantı</a>

Pencereyi içeriğin şekillendirmesi istenirse (CSS; display:inline-block). Pencere içeriğindeki nesnelerin azami genişliği pencere genişliğini ayarlar.
Önemli: İçerikde genişliği sınırlandırılmamış metin varsa pencere tüm ekrana yayılır.

<a href="#kutu" class="popup" data-inline="true">Popup Açan Bağlantı</a>

Başka bir sayfadan bir bölümü çağırma:

<a href="/baska-sayfa.html#kutu" class="popup">Popup Açan Bağlantı</a>

Başka bir sayfayı IFRAME içinde çağırma ve pencere açma:

Herhangi bir yükseklik değeri verilmeyen IFRAME içeren popup sayfanın tamamını kaplar.

<a href="/baska-sayfa.html" class="popup" data-iframe="evet">Hedefi iframe içine alıp popup açan bağlantı</a>

IFRAME için yükseklik değeri verilirse (piksel) CSS’de max-width ile popup genişliği de sınırlanır. Bu değer .yukseklikvar classı ile tanımlanır. Varsayılan max-width değeri 960px’dir. Eğer data-maksgen değeri girilirse bu css genişliği dikkate alınmaz.

<a href="/baska-sayfa.html" class="popup" data-iframe="evet" data-iframe-yukseklik="400" data-maksgen="400">Hedefi iframe içine alıp popup açan bağlantı. Yüksekliği verilen değerde tutar.</a>

<style> .muhtesempoap.iframe.yukseklikvar .sayfaG {max-width:960px} </style>

Başka bir alan adından (domain) sayfayı IFRAME içinde göstermek isterseniz güvenlik protokülüne takılır ve tarayıcı bunu gerçekleştirmez. Bu sorunu aşmak isterseniz şu konuya bakınız; Access-Control-Allow-Origin

Gereksinimler

Örnek kullanımlar

Bu sayfa içinde bir içeriği popup ile görüntüleyin. CSS: inline-block olarak görüntüleyin.

<p>Bu sayfa içinde bir içeriği popup ile <a href="#popup-1" "class="popup buton">görüntüleyin.</a></p>

Azami genişlik vererek görüntüleyin: görüntüleyin.

<p>Azami genişlik vererek <a href="#popup-2" "class="popup buton" data-maksgen="320">görüntüleyin.</a></p>

Başka sayfa içinde bir içeriği popup ile görüntüleyin. (Sadece alan adı altında çalışabilir)

<p>Başka sayfa içinde bir içeriği popup ile <a href="index.html#popup-1" "class="popup buton">görüntüleyin.</a></p>

Bu sayfanın kendisini bir iframe içinde çağıralım. (Sadece alan adı altında çalışabilir)

Bu sayfanın kendisini bir iframe içinde <a href="index.html" class="popup buton" data-iframe="evet">çağıralım.</a>

Bu sayfanın kendisini bir iframe içinde, sabit bir yükseklikte ve genişlikte çağıralım. (Sadece alan adı altında çalışabilir)

Bu sayfanın kendisini bir iframe içinde, sabit bir yükseklikte çağıralım <a href="index.html" class="popup buton" data-iframe="evet" data-iframe-yukseklik="400" data-maksgen="400">çağıralım.</a>

Seçenekler

<a> etiketine atanmış ayarları dikkate alır. Örneğin: <a class=”popup” data-inline=”true”>Bağlantı Metni</a>. Kullanımları zorunlu değildir.

Özellik Değer türü Açıklama
data-class metin Özel class atamak için istediğinizi yazın. Türkçe karakter kullanmanız önerilmez
data-maksgen sayı Sadece sayı girin. (Piksel)
data-inline true İçeriğe göre otomatik olarak genişleyip daralmasını isterseniz girin. data-maksgen girilirse sınırlandırılır. Örneğin; 200PX genişlikte bir görsel varsa içerikte pencereniz bu görselin etrafını saracaktır.
data-iframe true Başka bir sayfayı iframe içinde çağırmak isterseniz “true” değeri girmeniz gerekir
data-iframe-yukseklik sayı Bu değer girilmezse iframe sayfanın tümünü kapsar. Sadece sayı girin (Piksel)

WordPress Eklentisine mi ihtiyacınız var?

Şu sayfadan indirin: www.codecillop.com/muhtesem-popup-wordpress-plugin/

Nasıl çalıştığına bakın

İNDİR...

İNDİR...

Kişisel kullanımlar için ücretsizdir.
Ticari kullanımlar için lisans almanız gerekmektedir.
Lisans ücrete tabi olabilir.

CodeCillop Muhteşem Popup : İndir

Dosyanız iniyor... Bağış yapmak ister misiniz?

Bağış yaparak yeni ve daha güzel kodlar geliştirmemize yardımcı olabilirsiniz.
PayPal üzerinden güvenli ödeme ile bağış yapabilirsiniz.

“CodeCillop Muhteşem Popup” için 4 yorum

  1. Oncelikle cok tesekkur ederim Pop Up calismasi icin

    Ancak iPhone da pop up acilmiyor. Ben mi bir yerde hata yaptim anlayamadim.

    Yardimlariniz icin tesekkurler.

    1. Merhaba, iPhone testleri de yapıldı. iPhone 5 üzeri için sorunsuz çalışıyor. Yakında bir güncelleme yayınlayacağız. Hangi modelde hata alıyorsunuz? Ekran görüntüsü paylaşma şansınız var mı? Yardımcı olalım.

        1. Muhteşem Popup 1.4.1 sürümü sitemize yüklendi. İndir butonu ile indirebilirsiniz.
          Bir sorun yaşamanız durumunda lütfen tekrar bilgilendirin.

          İyi günlerde kullanın.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir