Web sitelerinde modal pencereler, yıllardır kullanıcı deneyimini iyileştirmek için vazgeçilmez bir araç olmuştur. İçerikleri üst üste yığmak ve fetch ile işlem yapmak, hem masaüstü hem de mobil cihazlarda UX’i geliştirmenin harika bir yoludur. Ancak çoğu geliştirici, HTML ve JavaScript standartlarının popover attribute ile native bir modal sistemi sunduğunu bilmez. Gelin bu özelliğe birlikte göz atalım.
Native bir HTML modal oluşturmak için tetikleyici olarak popovertarget attribute’ünü, içerik öğesini tanımlamak için ise popover attribute’ünü bir id ile birlikte kullanmanız yeterlidir. Örneğin: vePopover içeriği burada. Butona tıkladığınızda popover açılır, ancak geleneksel bir arka plan katmanı rengi olmadığı için bunu CSS ile kendiniz eklemeniz gerekir.
Popover içeriğini şekillendirmek oldukça standarttır, ancak modalın 'arka planını' tarayıcı stil sayfası seçicisinin sözde seçicisi ile stilleyebiliriz: [popover] { background: lightblue; padding: 20px; } ve [popover]:-internal-popover-in-top-layer::backdrop { background: rgba(0, 0, 0, .5); }. :-internal-popover-in-top-layer::backdrop, modalın arka planını temsil eder. Geleneksel olarak bu arayüz, yığın ilişkisini göstermek için opaklığa sahip bir öğe olarak kullanılır.
HTML popover attribute, JavaScript kullanmadan modal oluşturmanın en basit yoludur. popovertarget ile tetikleyici, popover ile içerik tanımlanır ve CSS ile görünüm özelleştirilir. Bu native yöntem, ek kütüphanelere ihtiyaç duymadan hızlı ve erişilebilir modal pencereleri sunar. Deneyerek web projelerinizde bu özelliği kullanabilirsiniz.
