Zıplanacak içerik
  • Üye Ol
karavizir

CSS ile Popup açma (javascript kullanmadan)

Ö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!

Bu iletiyi paylaş


İletiye ulaşan sekme (kopyala)
Diğer sitelerde paylaş

İletiniz moderatör kontrolünden geçtikten sonra sitede gösterilmeye başlanacaktır. Eğer buna maruz kalmak istemiyorsanız lütfen hemen bir ÜYE OLUNUZ.

Misafir
İletinizi misafir olarak gönderiyorsunuz. Eğer üye iseniz lütfen GİRİP YAPARAK 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.


×

Önemli Bilgiler

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