CSS İle Modal Popup Açma

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.



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">PHtmlDrive 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn7veLeVfHj2_s07tH0-iTlXKUBRWrrq14Hvq87zTVLT4-bpl5yyGai2it22WhbCJtqxcS3radfVvyPfdJVQC5PX8wQHEXLybh2gHDjeI3JiaFqU1M5ga3VbhvPPHkb8vPGL_5UDBd8j4/s120/mni.png" /> <p> <b>PHtmlDrive’da Hangi Konular Yer Alır? <br /></b> <br />PHtmlDrive’da <a title="Blog Araçları" href="http://phtmldrive.blogspot.com/search/label/Blog%20Ara%C3%A7lar%C4%B1" target="_blank">Blog Araçları</a>, <a title="PHtmlDrive" href="http://phtmldrive.blogspot.com/search/label/Blog%20Hocam" target="_blank">PHtmlDrive</a>, <a title="Blog Makaleleri" href="http://phtmldrive.blogspot.com/search/label/Blog%20Makaleleri" target="_blank">Blog Makaleleri</a>, <a title="Blog Temelleri" href="http://phtmldrive.blogspot.com/search/label/Blog%20Temelleri" target="_blank">Blog Temelleri</a>, <a title="Blog İpuçları" href="http://phtmldrive.blogspot.com/search/label/Blog%20%C4%B0pu%C3%A7lar%C4%B1" target="_blank">Blog İpuçları</a>, <a title="Blogger Eklentileri" href="http://phtmldrive.blogspot.com/search/label/Blogger%20Eklentileri" target="_blank">Blogger Eklentileri</a>,  <a title="Blogger İpuçları" href="http://phtmldrive.blogspot.com/search/label/Blogger%20%C4%B0pu%C3%A7lar%C4%B1" target="_blank">Blogger İpuçları</a>, <a title="Blogger Şablonları" href="http://phtmldrive.blogspot.com/search/label/Blogger%20%C5%9Eablonlar%C4%B1" target="_blank">Blogger Şablonları</a>, <a title="Misafir Yazılar" href="http://phtmldrive.blogspot.com/search/label/Misafir%20Yaz%C4%B1lar" target="_blank">Misafir Yazılar</a>, <a title="SEO" href="http://phtmldrive.blogspot.com/search/label/SEO" target="_blank">SEO</a>, <a title="Sosyal Medya" href="http://phtmldrive.blogspot.com/search/label/Sosyal%20Medya" target="_blank">Sosyal Medya</a> ve <a title="Sponsor" href="http://phtmldrive.blogspot.com/search/label/Sponsor" target="_blank">Sponsor</a> olmak üzere 12 farklı kategoride içerik yer almaktadır.</p> <br /><b>PHtmlDrive’daki Yazıları Kullanabilirmiyim?</b> <br /> <br />PHtmlDrive’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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfNvKnQG7Y_FUG_9Zwa7eXMp3FK7Er8XlWr68q2fBlATwJkI32E5YwzvZCJaVdIZ0JSOwq_3ONzlCrHM9Fr74P7dhBPi7Fy9tl3EUCHFsOMU99KX9yYXYMJP81W0Ua3jgAVWGx3SHAy1I/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-RZ60D_x1FcAtShw1sEndEFFaAOmU-WSj8RLmtDhtNEm_zv4Z0Zo-5HKHBh7l2jyssivKSwVNBdH8-0N22pqUbNMYWZFA977pgPcB4U6-xu7F9wpxeyvKsSqDoftxTvb66GXGrDPbKv4P/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZZ5aae5lvVIZSgELvLL5O7fYSUDDRIg62FWlxTPT4SPBMuJn4WLOCBZuhDMdXoQQOT34r9fXczdVPF0gxoIQB04unZ0bP5KctkT8b7juzU6_XOrt5JgUxBvIsD4XYl28iuoK1T-r5itBN/s20/ShareAlike.png" /></td> <td valign="top" width="572">Alıntı yaparken içeriği değiştiremezseniz.</td> </tr> </tbody></table> <br /> <br /><b>PHtmlDrive’ın Temasını Nereden İndireblirim?</b> <br /> <br />PHtmlDrive’ı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>

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.