23 Ocak 2013 Çarşamba

CSS İle Modal Popup Açma

23 yorum

Yazının hikayesine ve içeriğine geçmeden önce başlıktaki “modal popup” ibaresinden bahsetmek istiyorum. Bildiğimiz popuplar sayfaya girdiğimizde otomatik olarak açılır. Modal popuplar ise bir butona ya da yazıya tıkladığımızda açılan pencerelerdir.

 

Kendi çağımda yaptığı bir tasarımda kullanmak üzere uzun süre odal popup aradım. Onlarca popup buldum ama bulduklarımın hepsi jquery kullanılarak yapıldığı için hiç biri içime sinmedi. Tam ümidi kesmişken Paul Hayes isimli bir programcıyla karşılaştım. Sitesinde sadece CSS ile yaptığı modal örneğini gördüm ve hemen kullanmaya başladım. Belki ihtiyacı olanlar vardır diye blogda da paylaşmaya karar verdim.

 

CSS Modal Popup

 

Bu eklenti, hiç bir scripte ihtiyaç duymadan sadece CSS3 teknikleri ile modal penceresi açmanızı sağlıyor. Demosunu görmek için aşağıdaki videoyu izleyebilirsiniz.

 

 

Siz de bu eklentiyi kullanmak isterseniz Yerleşim sekmesini açın ve Gadget ekle diyerek HTML/JavaScript olarak şu kodları ekleyin.

 

<style>
/* Container */
.modal {

/* Overlay page content */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;

/* Transition opacity on open */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

/* Hide for now */
opacity: 0;
pointer-events: none;
}

/* Show modal */
.modal:target {
opacity: 1;
pointer-events: auto;
/* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */
}

/* Content */
.modal > div {
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;

/* Default minimise animation */
-webkit-animation: minimise 500ms linear;
-moz-animation: minimise 500ms linear;

/* Prettify */
padding: 30px;
border-radius: 7px;
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
text-shadow: 0 1px 0 #fff;
}

/* Override animation on modal open */
.modal:target > div {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
}

.modal h2 {
font-size: 36px;
padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
      -webkit-transform: scale3d(0.1,0.1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
      -webkit-transform: scale3d(1.08,1.08,1);
      box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
      -webkit-transform: scale3d(0.95,0.95,1);
      box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
      -webkit-transform: scale3d(1,1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
      -webkit-transform: scale3d(1,1,1);
  }
  100% {
      -webkit-transform: scale3d(0.1,0.1,1);
  }
}

@-moz-keyframes bounce {
  0% {
      -moz-transform: scale3d(0.1,0.1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
      -moz-transform: scale3d(1.08,1.08,1);
      box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
      -moz-transform: scale3d(0.95,0.95,1);
      box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
      -moz-transform: scale3d(1,1,1);
      box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-moz-keyframes minimise {
  0% {
      -moz-transform: scale3d(1,1,1);
  }
  100% {
      -moz-transform: scale3d(0.1,0.1,1);
  }
}

/* Modal close link */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* Reset native styles */
.modal a[href="#close"]:focus {
outline: none;
}

/* Create close button */
.modal a[href="#close"]:after {
content: 'X';
display: block;

/* Position */
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;

/* Style */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
outline: 1px solid #000;
}

/* Open modal */
a.openModal {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
    background-color:#77d42a;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #268a16;
    display:inline-block;
    color:#306108;
    font-family:Verdana;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #aade7c;
}

a.openModal:hover,
a.openModal:focus {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
    background-color:#5cb811;
}
</style>

<a href="#example" class="openModal">Blog Hocam FAQ</a>
<aside id="example" class="modal">
    <div>
        <h2>Sıkça Sorulan Sorular</h2>
<img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px; padding-top: 0px" border="0" src="https://lh4.googleusercontent.com/-v2XdFBwe6AA/UPXFUOxqnlI/AAAAAAAAGw4/gpS3HJaRjhU/s120/mni.png" />
<p><strong>Blog Hocam’da Hangi Konular Yer Alır?
    <br /></strong>
  <br />Blog Hocam’da <a title="Blog Araçları" href="http://bloghocam.blogspot.com/search/label/Blog%20Ara%C3%A7lar%C4%B1" target="_blank">Blog Araçları</a>, <a title="Blog Hocam" href="http://bloghocam.blogspot.com/search/label/Blog%20Hocam" target="_blank">Blog Hocam</a>, <a title="Blog Makaleleri" href="http://bloghocam.blogspot.com/search/label/Blog%20Makaleleri" target="_blank">Blog Makaleleri</a>, <a title="Blog Temelleri" href="http://bloghocam.blogspot.com/search/label/Blog%20Temelleri" target="_blank">Blog Temelleri</a>, <a title="Blog İpuçları" href="http://bloghocam.blogspot.com/search/label/Blog%20%C4%B0pu%C3%A7lar%C4%B1" target="_blank">Blog İpuçları</a>, <a title="Blogger Eklentileri" href="http://bloghocam.blogspot.com/search/label/Blogger%20Eklentileri" target="_blank">Blogger Eklentileri</a>,&#160; <a title="Blogger İpuçları" href="http://bloghocam.blogspot.com/search/label/Blogger%20%C4%B0pu%C3%A7lar%C4%B1" target="_blank">Blogger İpuçları</a>, <a title="Blogger Şablonları" href="http://bloghocam.blogspot.com/search/label/Blogger%20%C5%9Eablonlar%C4%B1" target="_blank">Blogger Şablonları</a>, <a title="Misafir Yazılar" href="http://bloghocam.blogspot.com/search/label/Misafir%20Yaz%C4%B1lar" target="_blank">Misafir Yazılar</a>, <a title="SEO" href="http://bloghocam.blogspot.com/search/label/SEO" target="_blank">SEO</a>, <a title="Sosyal Medya" href="http://bloghocam.blogspot.com/search/label/Sosyal%20Medya" target="_blank">Sosyal Medya</a> ve <a title="Sponsor" href="http://bloghocam.blogspot.com/search/label/Sponsor" target="_blank">Sponsor</a> olmak üzere 12 farklı kategoride içerik yer almaktadır.</p>
<br /><strong>Blog Hocam’daki Yazıları Kullanabilirmiyim?</strong>
<br />
<br />Blog Hocam’da yer alan yazılar aksi belirtilmedikçe tarafımdan yazılmıştır ve <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" target="_blank">Creative Commons Attribution-NonCommercial-NoDerivs 2.5</a> lisansı ile korunmaktadır.Bu lisansın genel koşulları şunlardır:
<br />
<br />
<table style="width: 600px" border="0" cellspacing="0" cellpadding="0"><tbody>
    <tr>
      <td width="24"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://lh4.googleusercontent.com/-sJjm5T4xo9w/TuIRWDbJ7AI/AAAAAAAABsw/2YK68dGZ8PQ/s20/Attribution.png" /></td>
      <td width="574">
        <div align="left">İçeriğin bana ait olduğu belirtmeli ve orijinal içeriğe link vermelisiniz.</div>
      </td>
    </tr>
    <tr>
      <td width="25"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://lh6.googleusercontent.com/-MWsfVjLk5LI/TuIRXMUnmYI/AAAAAAAABs4/dN6vgV_f5I4/s20/Noncommercial.png" /></td>
      <td valign="top" width="573">İçeriği ticari amaçlı kullanamaz ve satamazsınız.</td>
    </tr>
    <tr>
      <td width="26"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://lh4.googleusercontent.com/-7p2WBX3KaKg/TuIRXw9SZdI/AAAAAAAABtA/VCnNKEVMdho/s20/ShareAlike.png" /></td>

      <td valign="top" width="572">Alıntı yaparken içeriği değiştiremezseniz.</td>
    </tr>
  </tbody></table>
<br />
<br /><strong>Blog Hocam’ın Temasını Nereden İndireblirim?</strong>
<br />
<br />Blog Hocam’ın teması tarafımdan tasarlanmış ve kodlanmıştır. Başka bir yerde veya kişide görme şansınız yoktur. Temamı özgünlük, markalaşma ve harcadığım emek adına şimdilik kimseyle paylaşmıyorum.
        <a href="#close" title="Kapat">Kapat</a>
    </div>
</aside>

Değiştirmeniz gereken yerler:

  • Blog Hocam FAQ yazan yere butonun ismini yazın.
  • <h2>Sıkça Sorulan Sorular</h2> yazan yere açılan penceredeki içeriğin başlığını yazın.
  • <p> ve </p> etiketleri arasına ise pencerede gözükmesini istediğiniz içeriği yazın

Bu arada belirtmeden geçemeyeceğim, eklenti Internet Explorer gibi çağ dışı tarayıcılarda çalışmayabilir. Lütfen Chrome, Opera ve Firefox gibi modern tarayıcılar kullanın.

23 yorum:

  1. Explorer yorumu çok iyi olmuş : )

    YanıtlaSil
  2. Süper eline sağlık paylaşım için :)

    YanıtlaSil
  3. çağ dışı :D :D çok iyiydi eline sağlık hocam

    YanıtlaSil
  4. elinize sağlık,her geçen gün eklenen yeni bilgilerle,bizde bir şeyler kapmaya çalışıyoruz.sağolun.

    YanıtlaSil
  5. Po-up pencereleri pek sevmiyorum ben Hocam bagisla..
    Hayirli kandiller..

    YanıtlaSil
  6. @Değmesin Yağlı Boya
    Saygı duyarım :) Size de hayırı kandiller.

    YanıtlaSil
  7. Hocam gayet güzel olmuş. Teşekkürler. Aradığım bir kod idi. Hocam bunlar tüm web sitesi için geçerli midir? Yoksa blogger'a uyumlu bir kod mu yukarıdakiler?

    YanıtlaSil
  8. Teşekkürler, güzel bir paylaşım olmuş.

    YanıtlaSil
  9. Teşekkürler Serdar abi. Explorer'a iyi vermişsin küsküyü :)

    YanıtlaSil
  10. guzel bir eklenti olmus benim blogumda benzerini yapmistim fakat anket koydum

    YanıtlaSil
  11. iyi günler serdar hocam blogunuz uzun süredir takip ediyorum güzel çalışmalar yapıyorsunuz ve birçok blogcu bunların aynen yayınlamakta (hırsızlar ):D
    hocam bende uzun zamandır blogla içli dışlıyım ama türlü karar veremdim hangi konu ile ilgili blog açmaya hep siliyorum tekrar açıyorum bu konuda sizden yardım istiyorum
    2) birçok blog tema sitesi mevcut ama doğru dürüst tema yok ya da isteğim türden bir tema yok ( fotolu manşet -sondakika yazısı olan-bir kösesinde yan yana duran butonlar olan ( çok okunan-yorum) gibi bu kadar şey barındıran bir tema istememin nedeni ileride alan adı alıp iş büyütmek istememdan kaynaklanıyorbbu konudan da sizden yardım istiyorum ltf yardımcı olurmsunuz

    YanıtlaSil
  12. Hocam çok tşkler...

    Tüm islam Aleminin Kandili Mübarek Olsun.

    YanıtlaSil
  13. @Ahmet Sağlam
    Evet her türlü sitede kullanılır.

    YanıtlaSil
  14. Serdar Abi o internet explorer yorumu çok güzel olmuş... Tek iyi bir yanı var sanırım... İnternette oyun oynamasını istemediğiniz küçük misafir çocuklara '' Bak internet çalışmıyor '' demeye yarıyor sadece :)

    YanıtlaSil
  15. Serdar Bey bir şey sormak istiyorum.
    Bu kodu kendi bloguma uyguladığımda malesef ortalı olmuyor, yazıların bir kısmı sayfanın altında kalıyor ve scroll'u aşağı çekmeme rağmen yeri değişmiyor, hep aşağıda kalıyor. Neyi yanlış yapıyorum acaba, neden ekrana tam ortalı durmuyor?

    YanıtlaSil
  16. ya tüm yazı içeriğini sildim ve video kodu koydum ama anasayfada da video gözüküyor içinde gömülü olmadı yardım edebilir misiniz

    YanıtlaSil
  17. @Melih Kirişci
    Denemedm ama script kullanılmadan yapılmış bir popup olduğu için video gösterileceğini sanmıyorum.

    YanıtlaSil
  18. video kodunu çevirdim gösteriyor ama popup haricindede çıkıyor bir bakarsan sevinirim fikir yürütebilirsin.
    http://kibariyeee.blogspot.com
    baktıktan sonra siyorumu silersen sevirim.
    Facebook yazısına basmalsn.
    çok teşekkürler

    YanıtlaSil
  19. pagetype özelliği kullndım bu seferde popup açılan pencerede de gözükmüyor anasayfa gibi kabul ettiği için

    YanıtlaSil
  20. çok güzel bir paylaşım olmuş hocam eline emeğine sağlık teşekkürler ...

    YanıtlaSil
  21. siz nasıl bir insansınız ? yine farkınızı ortaya koydunuz çok işime yaradı.elinize emeğinize sağlık teşekkürler Serdar Hocam.

    YanıtlaSil
  22. Gayet Hoş. Teşekkür Ederim.

    YanıtlaSil
  23. Hocam iyi günler, buna sürüklenebilir özelliği nasıl verebiliriz. Cevabınızı sabırla bekliyorum. Şimdiden teşekkürler...

    YanıtlaSil

Picardes

LİNKLER