HTML açılır pencere özelliği
Modal'lar yirmi yıldır web sitelerinin önemli bir parçası olmuştur. İçerikleri yığınlamak ve görevleri gerçekleştirmek için getirmeyi kullanmak, hem masaüstü hem de mobil cihazlarda kullanıcı deneyimini iyileştirmenin harika bir yoludur. Ne yazık ki çoğu geliştirici, HTML ve JavaScript özelliklerinin popover özelliği aracılığıyla yerel bir modal sistem uyguladığını bilmiyor - hadi bir göz atalım!
Yerel bir HTML modeli oluşturmak, içerik öğesini tanımlamak için tetikleyici olarak popovertarget niteliğinin ve id ile eşleştirilmiş popover niteliğinin kullanılmasından oluşur:
Düğmeye tıkladığınızda açılır pencere açılacaktır. Ancak açılır pencerenin geleneksel bir arka plan katmanı rengi olmayacak, bu nedenle bunu biraz CSS büyüsüyle kendi başımıza uygulamamız gerekecek.
Popover içeriğinin içeriğinin şekillendirilmesi oldukça standarttır ancak modalın "arka planına" stil vermek için tarayıcı stil sayfası seçicisinin sözde seçicisini kullanabiliriz:
/* açılır pencerenin içeriği */ [açılır pencere] { arka plan: açık mavi; dolgu: 20 piksel; } /* iletişim kutusunun "modal" arka planı */ [popover]:-internal-popover-in-top-layer::backdrop { arka plan: rgba(0, 0, 0, .5); }
Sonuç ve Değerlendirme
:-internal-popover-in-top-layer::backdrop, modalın "arka planını" temsil eder. Geleneksel olarak bu kullanıcı arayüzü, istifleme ilişkisini gösterecek şekilde opaklığa sahip bir öğe olmuştur.
