Zıplanacak içerik
  • Üye Ol

CSS ile Popup açma (javascript kullanmadan)


karavizir

Önerilen İletiler

Html kodu gayet basit :

 

<p>

<a href="#">Hover Me!

<span>I'm a popup...</span>

</a>

</p>

 

 

popupun kodunu span elemanin içine koyun

 

 

CSS böyle yazilir :

 

a{

color:#ccc;

text-shadow:0 -1px 0 black;

}

a:hover,a:focus{

background:rgba(0,0,0,.4);

box-shadow:0 1px 0 rgba(255,255,255,.4);

}

 

 

a span{

position:absolute;

margin-top:23px;

margin-left:-35px;

color:#09c;

background:rgba(0,0,0,.9);

padding:15px;

border-radius:3px;

box-shadow:0 0 2px rgba(0,0,0,.5);

transform:scale(0) rotate(-12deg);

transition:all .25s;

opacity:0;

}

 

 

a:hover span, a:focus span{

transform:scale(1) rotate(0);

opacity:1;

}

 

Firefox ve Chromeda iyi çalışıyor

 

tek sorunu IE de popup açılmıyor.

gösteri için özel sitemin adresini koyardim ama forumda yeni oldugum için olmuyor!

Yoruma sekme
Diğer sitelerde paylaş

Katılın Görüşlerinizi Paylaşın

Şu anda misafir olarak gönderiyorsunuz. Eğer ÜYE iseniz, ileti gönderebilmek için HEMEN GİRİŞ YAPIN.
Eğer üye değilseniz hemen KAYIT OLUN.
Not: İletiniz gönderilmeden önce bir Moderatör kontrolünden geçirilecektir.

Misafir
Maalesef göndermek istediğiniz içerik izin vermediğimiz terimler içeriyor. Aşağıda belirginleştirdiğimiz terimleri lütfen tekrar düzenleyerek gönderiniz.
Bu başlığa cevap yaz

×   Zengin metin olarak yapıştırıldı..   Onun yerine sade metin olarak yapıştır

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Önceki içeriğiniz geri getirildi..   Editörü temizle

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Yeni Oluştur...

Önemli Bilgiler

Bu siteyi kullanmaya başladığınız anda kuralları kabul ediyorsunuz Kullanım Koşulu.