Pop-up ve iletişim kutusu

Açılır pencere, popover özelliği olan herhangi bir öğedir ve ipuçları, uyarılar, bildirimler gibi çok çeşitli etkileşimli desenler için kullanışlıdır.

<div id="my-popover" popover>My popover content</div>

popover özelliği, öğeyi varsayılan olarak gizler ve kullanıcıların öğeyi açabilmesi için bir yol sağlamanız gerekir. Pop-over'lar en üst katmana, diğer tüm içeriklerin üzerine yerleştirilse de modal değildir. Bu durumda, pop-up pencerenin dışındaki içeriklerle etkileşimde bulunmaya devam edebilirsiniz.

Popover'ları kontrol etme

Farklı türlerdeki pop-over'ları ve bunların davranışlarını incelemeden önce pop-over'larınızı nasıl açıp kapatacağınızı öğrenin.

Bildirim temelli

Popover'lar, JavaScript kullanmaya gerek kalmadan tamamen HTML'de kontrol edilebilir. Bunun için düğmeler (ve button türündeki girişler) ve popovertarget özelliği kullanılır.

Önceki kod snippet'indeki popover'ın id değeri my-popover'dir. Popover'a başvurmak için bu değeri kullanabilirsiniz.

<button popovertarget="my-popover">Toggle</button>

popovertargetaction="show" ve popovertargetaction="hide" kullanarak bir düğmenin popover'ı açıp kapatacağını da belirtebilirsiniz.

JavaScript ile

Ayrıca, bir popover'ı JavaScript kullanarak da kontrol edebilirsiniz. Bu, kullanıcının bir düğmeyi tıklaması dışında bir şeye yanıt olarak popover göstermek istediğinizde kullanışlıdır. Bunu yapmak için popover öğesini almanız ve ardından showPopover(), hidePopover() veya togglePopover()'yi çağırmanız gerekir.

Pop-over türleri

Sitenize bir pop-over eklediğinizde dikkate almanız gereken birçok etkileşim vardır. Nasıl açılır? Kullanıcılar bu mesajı nasıl kapatabilir? Diğer açık pop-over'lara ne olur? Üç tür pop-over vardır ve kullanım alanınızın gerektirdiği davranış ve etkileşimleri sağlayan türü seçebilirsiniz.

Otomatik popover'lar

Otomatik pop-over'lar en fazla işlevselliğe sahiptir ve bir tür belirtmezseniz varsayılan olarak kullanılır.

<div id="popover" popover>My popover</div>

Çoğu durumda, aynı anda birden fazla popover'ın açık olmasını istemezsiniz. Bu nedenle, otomatik popover'lar açıldığında diğer otomatik popover'ları kapatır. Ayrıca "hafif kapatma" özelliğini de desteklerler. Bu özellik sayesinde popover'ın dışına tıkladığınızda popover otomatik olarak kapanır. Ayrıca Esc tuşuyla da kapatılabilir.

Manuel pop-over'lar

Otomatik popover davranışı birçok kullanım alanını kapsasa da popover'larınız üzerinde daha fazla kontrole ihtiyaç duyabileceğiniz durumlar olabilir. Manuel pop-over'lar sayesinde çok daha fazla kontrol sahibi olursunuz ve davranışın büyük bir kısmından da sorumlu olursunuz.

<div id="popover" popover="manual">My popover</div>

Bu popover yalnızca açıkça kapattığınızda kapanır. Hafifçe kapatma veya Esc tuşuyla kapatılamaz. Ancak aynı anda birden fazla pop-over açabilirsiniz.

İpucu pop-up'ları

Sayfanıza ipuçları eklemek için popover'ları da kullanabilirsiniz. Bu desende, bir öğenin üzerine gelip açıklamasını görmek istersiniz. Aynı anda yalnızca bir tanesi açık olmalıdır. Otomatik pop-over'ları kullanıyorsanız birini açtığınızda diğer açık otomatik pop-over'lar kapatılır. Manuel pop-over'lar kullanıyorsanız diğer pop-over'ları kapatma da dahil olmak üzere davranışın büyük bir kısmını manuel olarak uygulamanız gerekir. İpucu pop-up'ları, otomatik pop-up'lara benzer davranışa sahip üçüncü bir seçenek sunar. Ancak, ipucu popover'ı açmak otomatik popover'ları kapatmaz.

<div id="popover" popover="hint">My popover</div>

İpucu pop-up'ları, birincil içeriğe ikincil olan ek bilgiler için kullanışlıdır. Genellikle ipucu pop-up'larını tıklama dışı etkinliklerle (ör. fareyle üzerine gelme veya odaklanma) tetiklemek istersiniz.

Popover'ınızın yerini belirleme

Varsayılan olarak, pop-up'larınız ekranın ortasında açılır. Bu öğeler, diğer tüm içeriklerinizin üzerinde en üst katmana eklenir ve görüntü alanına göre konumlandırılabilir.

Bu durum her zaman ideal değildir. Çünkü genellikle popover'larınızı tetikleyen öğenin yakınına yerleştirmek istersiniz. Sabitleme konumu, bunu yapmanın bir yolunu sunar.

Sabit öğe konumlandırması iki adımdan oluşur: Sabit öğeyi tanımlama ve öğenizi bu sabit öğeye göre yerleştirme. Popover'lar, sizin için örtülü bir bağlantı oluşturarak ilk adımı halledebilir. <button popovertarget> kullanarak bir popover açtığınızda düğme, örtülü sabittir. JavaScript kullanarak bir popover açıyorsanız source seçeneğiyle örtülü bağlantıyı ayarlayabilirsiniz.

Varsayılan olarak, popover margin: auto kullanılarak ortalanır. Sabit konumlandırmayı kullanmak için margin: unset değerini ayarlayarak bu durumu geçersiz kılmanız gerekebilir.

Stiller ve animasyonlar

::backdrop sözde öğesi

Pop-up'lar, sayfanızdaki diğer tüm içeriklerin üzerinde, en üst katmanda açılır. Pop-up'ın altında, stil verilebilen bir ::backdrop sözde öğe bulunur.

Açılır pencerenin dışındaki içeriğin etkisiz olmadığını, düğmeleri tıklamaya ve klavyenizi kullanarak sayfada gezinmeye devam edebileceğinizi unutmayın. Örneğin, yoğun bir bulanıklaştırma efekti uygulayarak veya arka planı opak bir renge ayarlayarak sayfa içeriklerini gizlememelisiniz.

:popover-open sahte sınıfı

CSS ızgaralarını kullanarak pop-over içeriğinizi düzenlemek istediğinizi varsayalım. [popover]{ display: grid } eklediğinizde tüm popover'larınız görünür hale gelir. Bunun nedeni, pop-over'ların display: none kullanılarak gizlenmesidir. Stilleri yalnızca popover açıkken uygulamak için :popover-open sözde sınıfını kullanabilirsiniz.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open, popover'a animasyon eklerken de kullanışlıdır.

Popover'lara animasyon ekleme

Bir popover'ın animasyonunda 3 adım vardır:

1. @starting-style {popover:popover-open { } }: Popover'ın görünür hale gelir gelmez uygulanacak ilk stilleri. Bu değerin, stil sayfanızda 2. adımdan sonra tanımlanması gerektiğini unutmayın.
2. popover:popover-open { }-Pop-up açıkken kullanılan stiller.
3. popover { }-Fareyle üzerine gelindiğinde açılan pencerenin kapanırken kullandığı stiller.

Bir popover açık değilken display: none kullanılarak gizlenir. Bunu canlandırmak için transition-behavior: allow-discrete özelliğini ayarlamanız ve display özelliğini transition içindeki özellikler listesine eklemeniz gerekir.

Popover'ınızı örtülü bir bağlantı noktasıyla konumlandırıyorsanız transition içindeki özellikler listesine overlay özelliğini de eklemeniz gerekir. Açılır pencere en üst katmandan kaldırıldığında örtülü sabitleme ilişkisi de kaldırılır. Bu nedenle, overlay özelliğine geçiş eklemek, çıkış geçişi tamamlanana kadar bu işlemi geciktirir.

Popover'lar arasındaki etkileşimler

Bir sayfada muhtemelen birden fazla pop-over bulunur. Bunların etkileşimi, türlerine ve nasıl kullanıldıklarına bağlıdır.

İç içe yerleştirilmiş popover'lar

Bazı durumlarda, başka bir popover'ın içinden popover açmanız gerekebilir. Örneğin, bir popover menünüz olabilir ve menü öğelerinden biri bir alt menü açar. Kullanıcı ana menüyü kapattığında alt menünün açık kalmasını istemiyorsunuz. Pop-up'lar bu durumu otomatik olarak ele almanıza yardımcı olabilir.

Bir ipucu popover'ından ipucu popover'ı veya bir otomatik popover'dan otomatik popover açıyorsanız popover'lar bir yığına yerleştirilir. Bir popover'ı kapattığınızda, yığında kendisinden sonraki tüm popover'lar da kapanır. Bu işlem, hafif kapatma ile de çalışır. Bir popover'ı tıklarsanız yığındaki sonraki tüm popover'lar kapanır ancak önceki popover'lar açık kalır.

Kaynak öğesi bir popover'ın içindeyse yığına bir popover eklenir. Kaynak öğe, bir düğmede popovertarget kullanıldığında veya .showPopover({source}) ya da .togglePopover({source}) çağrılırken source seçeneği ayarlanarak JavaScript ile otomatik olarak ayarlanır.

Otomatik pop-over'lar için bir yığın, ipucu pop-over'ları için ise ayrı bir yığın vardır. Ancak, otomatik popover'ın içinden bir ipucu popover'ı açarsanız bu popover otomatik yığına eklenir.

İpucu pop-up'larının daha basit ve geçici bilgiler için tasarlandığını unutmayın. Bu nedenle, ipucu pop-up'larından otomatik pop-up'ları tetikleyemezsiniz.

Manuel pop-up'lar kullanıyorsanız tüm bunları manuel olarak yönetmeniz gerekir.

Diğer popover türlerini kapatma

Otomatik popover'ların açılmasıyla diğer otomatik popover'ların kapandığını öğrendiniz. Ancak farklı türler nasıl etkileşime girer? Üç türün tamamını kullanan bir sayfa örneğiyle bu konuyu inceleyelim. Açmak ve kapatmak için otomatik pop-over'ları kullanan düğmelerin bulunduğu bir gezinme menüsü var. Sayfada, bağlama dayalı ipuçlarını göstermek için ipucu pop-up'larını kullanan metinler var. Son olarak, kullanıcının bir arka plan görevinin tamamlandığını bilmesini sağlamak için manuel popover içeren bir toast mesajı gösterilir.

İpuçları geçicidir ve metnin üzerine fareyle geldiğimizde görünür. Bir seferde yalnızca bir ipucu görünmesini bekliyoruz. İkinci bir ipucu popover'ı tetiklendiğinde ilk ipucu kapatılır.

Bir düğmeyi tıklayarak menüyü açtığınızda ipucu iki nedenden dolayı kapanır. İlk olarak, ipucunun dışındaki tıklama, ipucunun hafifçe kapatılmasına neden olur. İkincisi, otomatik popover açıldığında açık olan tüm ipucu popover'ları kapatılır. Bunun nedeni, kullanıcının odaklandığı şeyi değiştirmesi ve ipucu popover'ındaki kısa süreli içeriğin artık alakalı olmamasıdır. Bu, otomatik popover'da showPopover() işlevini çağırırsanız açık olan tüm ipucu popover'larının kapanacağı anlamına gelir.

Açılır menüler otomatik olarak açılır. Açılır menülerde aynı anda yalnızca bir menünün açık olmasını beklersiniz. Bir menü açıldığında diğer menü kapanır. Gördüğünüz gibi, otomatik popover'ların açılması, açık olan ipucu popover'larını da kapatır.

Ancak, açılır menü açıkken alakasız bir ipucu metninin içeriğini görüntülemek isteyebilirsiniz. İpucu araç ipucunun gösterilmesi, otomatik popover'ları kapatmaz.

Manuel popover, otomatik veya ipucu popover'larından etkilenmez ve açıldığında ipucu ya da otomatik popover'ları kapatmaz. Ancak bir düğmeyi tıklayarak manuel bir popover açarsanız bu işlem, ipucu ve otomatik popover'ların hafifçe kapatılmasını tetikler.

Popover türleri arasındaki etkileşimler karmaşık görünebilir ancak türleri doğru durumlarda kullanırsanız yaygın kullanım kalıplarına izin verir. Pop-up'larınız beklendiği gibi etkileşim almıyorsa hangi türleri kullandığınızı tekrar gözden geçirin.

Anlayıp anlamadığınızı kontrol etme