Sadece CSS ile Modal Yapımı

Web tasarımının klasikleşmiş popup yapıları yerlerini modallara bıraktılar. Sayfa değişimine gerek kalmadan ve yeni sekme açmadan çalışan modal öğeleri web kullanıcılarına büyük kolaylıklar sağlamakta.

İnternette karşılaştığımız neredeyse tüm modal tasarımları da jQuery desteğiyle hazırlanmakta. Ancak gelişen teknolojiler yeni teknikleri de beraberinde getirmekte.

CSS3‘ün :checked selector tanımı sayesinde hiçbir JavaScript kütüphanesine ihtiyaç duymadan hem basit hem de performanslı modal yapısı oluşturabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

CSS3 MODAL

Hazırlayacağımız tekniğin fonksiyonelitesini bir checkbox öğesi oluşturacak. Checkbox seçiliyken modal gözükecek, seçim kaldırıldığında da kaybolacak. Özetle işlem bu kadar. Tabii düzgün bir görüntü elde etmek için checkbox’ı kullanıcıdan gizleyeceğiz, onu tetikleyen bir label’i ön plana çıkaracağız.

HTML Kodları

İlk olarak checkbox öğesini ve onu tetikleyen label elemanını ekleyelim.

<label for="gizli-checkbox" class="modal-ac">Modal</label>
<input id="gizli-checkbox" type="checkbox"/>

Şimdi de açılacak modal yapısını oluşturalım.

<div class="cerceve">
  <div class="modal">
    <label for="gizli-checkbox" class="kapat">✖</label>
    <h2>Modal Başlığı</h2>
    <p>
      Burası model içeriğinin olacağı yer.
    </p>
  </div>
</div>

Şimdi bu HTML kodlarını biraz stilize edelim.

CSS Kodları

Checkbox inputunu gizleyerek işe başlayalım.

input[type='checkbox']#gizli-checkbox{
 display:none;
}

Çerçeveyi bir perde gibi kullanmayı unutmayalım.

.cerceve {
  background: rgba(5, 10, 30, 0.5);
  opacity:0;
  visibility:hidden;
  z-index: 99999;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

Sırada modal yapısının temelini tasarlamak var.

.modal{
  background-color:white;
  width: 45%;
  height: 60%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border-radius:5px;
  padding:10px 15px;
}

.modal .kapat{
  float:right; 
  color:#666; 
  cursor:pointer;
}

Şimdi de checkbox işaretlendiğinde tasarımın alacağı aksiyonu belirleyelim.

input[type='checkbox']#gizli-checkbox:checked ~ .cerceve{
  position:absolute;
  z-index:9999;
  top:0;bottom:0;left:0; right:0;
  opacity:1;
  visibility:visible;
}

Son olarak tasarımın responsive olması için küçük ekranlara özel media sorgularını ekleyelim.

@media (max-width:1280px){.modal{width:70%; height:70%;}}
@media (max-width:768px){.modal{width:90%; height:90%;}}

Bu kadar. Modalımız hazır.

Sizce kullanışlı mı?

Sadece CSS ile hazırlanmış modal yapılarına sıcak bakıyor musunuz?

Yorumlarınızı bekliyoruz.