Özet - Modal iskeleti

CSS kursu · Başlangıç · Ders 77/82

Overflow, z-index ve position ile modal iskeleti kurarsın.

Özet: Modal iskeleti

Bu grupta taşmayı denetlemeyi, üst üste dizmeyi ve yaslama akışını öğrendin. Şimdi bunları bir araya getirip bir modal iskeleti kuracağız. Modal, sayfanın üstünde beliren bir kutudur: kaplayıcı arka planı karartır, kutu içeriği kırparak sunar.

İki parça gerekir: .modal-overlay sabit duran yarı saydam kaplayıcı; .modal-box içerik kutusu. Kaplayıcı position: fixed ve yüksek z-index ile sayfanın üstünde durur; kutu overflow: hidden ile içeriği kırpar.

Uygulama Modal iskeletini kur

İki sınıf seçicisi yaz: .modal-overlay ve .modal-box. Birinciye position: fixed ve z-index: 100 bildirimlerini ekle. İkinciye position: absolute ve overflow: hidden bildirimlerini ekle. Böylece kaplayıcı sabit durur, kutu içerik kırparak sunar.

Örnek çözümü göster

/* modal iskeleti */
.modal-overlay {
  position: fixed;
  z-index: 100;
}
.modal-box {
  position: absolute;
  overflow: hidden;
}

Kendini test et

Özelliği modal parçasına eşle

position: fixed

Kaplayıcıyı sabitler
z-index: 100

Kaplayıcıyı üste çıkarır
overflow: hidden

Kutunun içeriğini kırpar
background-color: rgba

Kaplayıcıyı karartır
Modal kaplayıcı için hangi ikili?
```
/* kaplayıcı */
.modal-overlay {
  ?
}
```
- overflow: hidden + position: absolute
- position: fixed + z-index: 100
- float: left + clear: both
- display: none + visibility: hidden
Cevabı göster

position: fixed + z-index: 100 — Doğru. position: fixed kaplayıcıyı ekranda sabitler, z-index: 100 en üste taşır.

Kutuyu kaplayıcının üstüne çıkar

.modal-box {
  position: absolute;
  overflow: hidden;
  ____;
}

Cevabı göster

.modal-box {
  position: absolute;
  overflow: hidden;
  z-index: 101;
}

Özet - Modal iskeleti