Pop-up'lar: Yeniden canlanıyor!

Jhey Tompkins

Open UI girişiminin hedefi, geliştiricilerin mükemmel kullanıcı deneyimleri oluşturmasını kolaylaştırmaktır. Bunu yapmak için, geliştiricilerin karşılaştığı daha sorunlu kalıpları gidermeye çalışıyoruz. Bunu, daha iyi platform yerleşik API'ler ve bileşenler sağlayarak başarabiliriz.

Bu tür bir sorun alanı, Açık Kullanıcı Arayüzünde "Pop-up'lar" olarak açıklanan pop-up'lardır.

Popover'lar uzun süredir oldukça kutuplaştırıcı bir üne sahip. Bunun nedenlerinden biri de kaynakların hem derlenme hem de dağıtılma şekilleridir. İyi inşa edilmesi kolay bir kalıp değildir, ancak kullanıcıları belirli şeylere yönlendirerek veya sitenizdeki içerikten haberdar olmalarını sağlayarak (özellikle iyi bir şekilde kullanıldıklarında) büyük değer sağlayabilirler.

Pop-up'ları oluştururken genellikle iki temel endişe vardır:

• İçeriğinizin geri kalanının üst kısmına uygun bir yere yerleştirildiğinden nasıl emin olursunuz.
• Erişilebilir hale getirme (klavye dostu, odaklanılabilir vb.)

Yerleşik Popover API'nin çeşitli hedefleri vardır. Bunların hepsinin temel hedefi, geliştiricilerin bu kalıbı oluşturmasını kolaylaştırmaktır. Bu hedeflerden bazıları şunlardır:

• Bir öğeyi ve alt öğelerini belgenin geri kalanının üzerinde görüntülemeyi kolaylaştırın.
• İçeriğiniz erişilebilir olsun.
• En yaygın davranışlar (hafif kapatma, singleton, yığma vb.) için JavaScript gerektirmez.

Pop-up'larla ilgili tüm özelliklere OpenUI sitesinde göz atabilirsiniz.

Tarayıcı uyumluluğu

Yerleşik Popover API'yi artık nerede kullanabilirsiniz? Chrome Canary'de "Deneysel web platformu özellikleri" bölümünün arkasında desteklenir dikkat edin.

Bu işareti etkinleştirmek için Chrome Canary'yi açın ve chrome://flags adresini ziyaret edin. Ardından, "Deneysel web platformu özellikleri"ni etkinleştirin tıklayın.

Bunu üretim ortamında test etmek isteyen geliştiriciler için kaynak denemesi de mevcuttur.

Son olarak, API için geliştirilmekte olan bir polyfill bulunur. Depoya github.com/oddbird/popup-polyfill adresinden de ulaşabilirsiniz.

Pop-up desteğini şu şekilde kontrol edebilirsiniz:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

Mevcut çözümler

İçeriğinizi diğer her şeyden önce tanıtmak için şu anda ne yapabilirsiniz? Tarayıcınızda destekleniyorsa HTML İletişim Öğesi'ni kullanabilirsiniz. Bunu "Modal" içinde kullanmanız gerekir. formunu doldurun. Bu da kullanmak için JavaScript gerektirir.

Dialog.showModal();

Erişilebilirlikle ilgili dikkat edilmesi gereken bazı noktalar vardır. Örneğin, 15.4 sürümünden daha eski Safari kullanıcılarına yemek sunuyorsanız a11y-dialog kullanılması önerilir.

Mevcut pop-up, uyarı veya ipucu tabanlı kitaplıklardan birini de kullanabilirsiniz. Bunların birçoğu benzer şekilde çalışma eğilimindedir.

• Pop-up'ları göstermek için gövdeye bir kapsayıcı ekleyin.
• Her şeyin üstüne gelecek şekilde tasarlayın.
• Pop-up göstermek için bir öğe oluşturun ve kapsayıcıya ekleyin.
• Pop-up öğesini DOM'den kaldırarak reklam öğesini gizleyin.

Bu durum, geliştiricilerin ekstra bağımlılık ve daha fazla karar gerektirir. İhtiyacınız olan her şeyi sunan bir teklif bulmak için de araştırma yapmanız gerekir. Popover API, ipuçları da dahil olmak üzere birçok senaryoya hitap etmeyi amaçlar. Amaç, tüm bu yaygın senaryoları ele alarak geliştiricilerin kendi deneyimlerini geliştirmeye odaklanabilmeleri için başka bir karar vermek zorunda kalmalarını önlemektir.

İlk pop-up'ınız

Hepsi bu kadar.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

Peki, burada ne oluyor?

• Pop-up öğeyi bir kapsayıcıya veya herhangi bir yere yerleştirmenize gerek yoktur. Öğe varsayılan olarak gizlidir.
• Görünmesi için herhangi bir JavaScript yazmanız gerekmez. Bu işlem, popovertoggletarget özelliği tarafından işlenir.
• Göründüğünde en üst katmana yükseltilir. Bu, öğenin görüntü alanında document öğesinin üstüne yükseltileceği anlamına gelir. z-index öğesini yönetmeniz veya pop-up'ınızın DOM'deki yeri konusunda endişelenmeniz gerekmez. Kırpan üst öğelerle birlikte, DOM'nin içine derinlemesine yerleştirilmiş olabilir. Şu anda hangi öğelerin en üst katmanda olduğunu Geliştirici Araçları'ndan da görebilirsiniz. Üst katmanla ilgili daha fazla bilgi için bu makaleye göz atın.

• "Hafif Kapat" mesajını alırsınız kullanıma hazır. Yani, pop-up'ı bir kapatma sinyaliyle kapatabilirsiniz. Örneğin, pop-up'ın dışına tıklama, klavyeyle başka bir öğeye gidebilir veya Esc tuşuna basabilirsiniz. Tekrar açıp deneyin.

Popover'la başka neler elde edersiniz? Örneği daha ayrıntılı inceleyelim. Sayfada biraz içerik bulunan bu demoyu düşünün.

Bu kayan işlem düğmesinin sabit konumu ve yüksek z-index değeri vardır.

.fab {
  position: fixed;
  z-index: 99999;
}

Pop-up içeriği DOM içine yerleştirilir, ancak pop-up'ı açtığınızda bu sabit konumlu öğenin üzerine yükseltilir. Herhangi bir stil ayarlamanız gerekmez.

Pop-up'ın artık bir ::backdrop sözde öğesine sahip olduğunu da fark edebilirsiniz. Üst katmanda bulunan tüm öğeler, stilize edilebilir bir ::backdrop sözde öğesi alır. Bu örnekte, azaltılmış alfa arka plan rengi ve alttaki içeriği bulanıklaştıran bir arka plan filtresiyle ::backdrop stilleri gösteriliyor.

Pop-up'ın stil özelliklerini ayarlama

Dikkatimizi pop-up'ın tasarımına bakalım. Varsayılan olarak, pop-up'ın konumu sabittir ve dolgu uygulanmıştır. Ayrıca display: none var. Pop-up'ın gösterilmesi için bunu geçersiz kılabilirsiniz. Ancak bu, videoyu en üst katmana yükseltmez.

[popover] { display: block; }

Pop-up'ınızı nasıl tanıttığınızdan bağımsız olarak, bir pop-up'ı en üst katmana yükselttikten sonra, bunu yerleştirmeniz veya yerleştirmeniz gerekebilir. En üst katmanı hedefleyip aşağıdaki gibi bir işlem yapamazsınız

:open {
  display: grid;
  place-items: center;
}

Varsayılan olarak, margin: auto kullanılarak görüntü alanının ortasında bir pop-up gösterilir. Ancak bazı durumlarda konumlandırma konusunda net olmak isteyebilirsiniz. Örneğin:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

İçeriği, CSS ızgarası veya flexbox kullanarak pop-up'ınızın içinde yerleştirmek istiyorsanız bunu bir öğe içine sarmak mantıklı olabilir. Aksi takdirde, pop-up üst katmana geldikten sonra display öğesini değiştiren ayrı bir kural bildirmeniz gerekir. Varsayılan olarak ayarlanırsa display: none geçersiz kılınarak varsayılan olarak gösterilir.

[popover]:open {
 display: flex;
}

Bu demoyu yapmayı denerseniz, pop-up'ın şu anda içeri ve dışarı geçtiğini fark edeceksiniz. :open sözde seçiciyi kullanarak pop-up'ları içeri ve dışarı aktarabilirsiniz. :open sözde seçicisi, gösterilen (ve dolayısıyla üst katmanda) pop-up'larla eşleşir.

Bu örnekte geçişi yürütmek için bir özel özellik kullanılmaktadır. Ayrıca, pop-up'ın ::backdrop öğesine de geçiş uygulayabilirsiniz.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

Buradaki bir ipucu, geçişleri ve animasyonları hareket için bir medya sorgusu altında gruplandırmaktır. Bu, zamanlamanızı korumanıza da yardımcı olabilir. Bunun nedeni, özel mülk aracılığıyla popover ile ::backdrop arasında değer paylaşamamanızdır.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

Bu noktaya kadar, pop-up'ı göstermek için popovertoggletarget ürününün kullanıldığını gördünüz. Bu istemi kapatmak için "Işık kapatma" yöntemini kullanıyoruz. Ancak kullanabileceğiniz popovershowtarget ve popoverhidetarget özelliklerini de kullanabilirsiniz. Düğmeyi gizleyen bir pop-up'a ekleyelim ve açma/kapatma düğmesini popovershowtarget kullanacak şekilde değiştirelim.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

Daha önce belirtildiği gibi, Popover API'sı tarihsel pop-up kavramımızdan daha fazlasını kapsıyor. Bildirimler, menüler, ipuçları vb. gibi her tür senaryo için geliştirme yapabilirsiniz.

Bu senaryolardan bazıları için farklı etkileşim kalıpları gerekir. Fareyle üzerine gelme gibi etkileşimler. popoverhovertarget özelliği kullanımıyla ilgili bir deneme yapıldı ancak bu özellik henüz uygulanmadı.

<div popoverhovertarget="hover-popover">Hover for Code</div>

Buradaki fikir, hedefi göstermek için bir öğenin üzerine gelmenizdir. Bu davranış, CSS özellikleri aracılığıyla yapılandırılabilir. Bu CSS özellikleri, fareyle pop-up'ın tepki verdiği bir öğenin üzerine gelip gelmediği zaman aralığını tanımlar. Deneme yapılan varsayılan davranış, açık bir :hover 0.5s sonrasında bir pop-up gösterildi. Ardından, kapatmak için ışığın kapatılması veya başka bir pop-up'ın açılması gerekir (Bu konuyla ilgili daha fazla bilgi verilecektir). Bunun nedeni, pop-up gizleme süresinin Infinity olarak ayarlanmasıdır.

Bu arada, söz konusu işleve çoklu dolgu yapmak için JavaScript'i kullanabilirsiniz.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopOver();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

Açık bir fareyle üzerine gelme penceresi ayarlamanın faydası, kullanıcının eyleminin bilinçli olarak yapılmasını sağlamasıdır (örneğin, kullanıcı işaretçisini bir hedefin üzerine getirir). Amaçları değilse pop-up'ı göstermek istemeyiz.

Pencere 0.5s değerine ayarlı olarak hedefin üzerine getirebileceğiniz bu demoyu deneyin.

Yaygın kullanım alanlarına ve örneklere göz atmadan önce birkaç noktaya değinelim.

Pop-up türleri

JavaScript olmayan etkileşim davranışlarını ele aldık. Peki, bir bütün olarak pop-up davranışı nasıl? "Işık kapat"ı istemiyorsanız ne olur? Yoksa pop-up'larınıza tek bir kalıp uygulamak mı istersiniz?

Popover API'sı, davranış açısından farklılık gösteren üç tür popover belirtmenize olanak tanır.

[popover=auto]/[popover]:

• İç içe yerleştirme desteği. Bu, yalnızca DOM'ye iç içe yerleştirileceği anlamına gelmez. Atalardan gelen popover'ın tanımı şu şekildedir:
  • DOM konumuna (alt öğe) göre değişir.
  • popovertoggletarget, popovershowtarget vb. gibi alt öğelerde özellikleri tetikleyerek birbiriyle ilişkilidir.
  • anchor özelliği ile ilişkili (Geliştirme CSS Anchoring API'si altında).
• Hafif kapat.
• Açılan, üste ait pop-up'lar olmayan diğer pop-up'ları kapatır. Atalardan gelen popover'larla iç içe yerleştirmenin nasıl işlediğini gösteren aşağıdaki demoyu inceleyin. Bazı popoverhidetarget/popovershowtarget örneklerinin popovertoggletarget olarak değiştirilmesinin nasıl değiştiğini görün.
• Birinin kapatılması, tümünün kapatılmasını sağlar. Ancak gruptaki bir tanesinin kapatılması, yalnızca bir üstünün üzerinde olanları yığında kapatır.

[popover=manual]:

• Diğer pop-up'ları kapatmaz.
• Işık kapatılamaz.
• Tetikleyici öğesi veya JavaScript aracılığıyla açık bir şekilde kapatılması gerekiyor.

JavaScript API

Pop-up'larınız üzerinde daha fazla kontrol sahibi olmanız gerektiğinde, JavaScript kullanarak gerekli işlemleri yapabilirsiniz. Hem showPopover hem de hidePopover yöntemini kullanabilirsiniz. Ayrıca dinleyeceğiniz popovershow ve popoverhide etkinliğiniz var:

Pop-up göster js popoverElement.showPopover(). Pop-up'ı gizleme:

popoverElement.hidePopover()

Gösterilen pop-up'ı dinleyin:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Pop-up'ın gösterilip gösterilmeyeceğini dinleyin ve gösterilmesini iptal edin:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

Gizlenen bir pop-up mesajı bekleyin:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Gizlenen bir pop-up'ı iptal edemezsiniz:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

Bir pop-up'ın üst katmanda olup olmadığını kontrol edin:

popoverElement.matches(':open')

Bu, daha seyrek karşılaşılan bazı senaryolar için ekstra güç sağlar. Örneğin, bir süre işlem yapılmadığında pop-up gösterin.

Bu demoda sesli pop-up'lar yer aldığından sesi çalmak için JavaScript'e ihtiyacımız olacak. Tıklandığında pop-up'ı gizler, sesi oynatır ve ardından tekrar gösteririz.

Erişilebilirlik

Popover API'yle erişilebilirlik, düşünce süreçlerinin saflarından biri. Erişilebilirlik eşlemeleri, pop-up'ı gerektiğinde tetikleyici öğesiyle ilişkilendirir. Bu durumda, popovertoggletarget gibi tetikleyici özelliklerden birini kullandığınız varsayıldığında aria-haspopup gibi aria-* özelliklerini bildirmeniz gerekmez.

Odak yönetimi için otomatik odaklama özelliğini kullanarak odağı pop-up içindeki bir öğeye taşıyabilirsiniz. Bu, İletişim Kutusu için aynıdır ancak fark, odağın geri alınması sırasında ortaya çıkar ve bunun nedeni ışığın kapatılmasıdır. Çoğu durumda, bir pop-up'ın kapatılması odağı daha önce odaklanılan öğeye geri döndürür. Ancak odak, ışık kapatıldığında tıklanan bir öğeye taşınabiliyorsa odaklanabiliyorsa. Açıklayıcıda odak yönetimi ile ilgili bölüme göz atın.

"Tam ekran sürümü" açmanız gerekir. nasıl çalıştığını görün.

Bu demoda, odaklanmış öğenin dış çizgisi yeşildir. Klavyenizle arayüzde gezinmeyi deneyin. Bir pop-up kapatıldığında odağın nereye döndürüldüğüne dikkat edin. Sekmelere geçtiğinizde pop-up'ın kapandığını da fark edebilirsiniz. Bu tasarım gereğidir. Pop-up'lar odaklı yönetime sahip olsalar da odağı yakalamazlar. Odak, pop-up'tan çıktığında klavyeyle gezinme bir kapatma sinyali algılıyor.

Demirleme (yapım aşamasında)

Pop-up'lar söz konusu olduğunda, dikkat edilmesi gereken karmaşık bir model, öğeyi tetikleyiciye sabitlemektir. Örneğin, bir ipucu tetikleyicisinin üzerinde gösterilecek şekilde ayarlanmışsa ancak doküman kaydırılıyorsa bu durumla karşılaşabilirsiniz. Bu ipucu, görüntü alanı tarafından kesilebilir. Bu sorunu gidermek için "Kayan Kullanıcı Arayüzü" gibi mevcut JavaScript teklifleri vardır. Bunun olmasını önlemek ve istediğiniz konum sırasını temel almanız için ipucunu yeniden konumlandıracaklar.

Ancak bunu stillerinizle tanımlayabilmenizi istiyoruz. Bu sorunun üstesinden gelmek için Popover API'nin yanı sıra geliştirme aşamasında olan tamamlayıcı bir API vardır. "CSS Sabit Konumlandırma" API, öğeleri diğer öğelere bağlamanıza olanak tanır ve bunu, öğeleri, görüntü alanı tarafından kesilmeyecekleri şekilde yeniden konumlandıracak şekilde yapar.

Bu demo, mevcut haliyle Sabitleme API'sini kullanmaktadır. Teknenin konumu, çapanın görüntü alanındaki konumuna yanıt verir.

Aşağıda, bu demonun çalışmasını sağlayan CSS snippet'i verilmiştir. JavaScript gerekmez.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

Spesifikasyonları buradan inceleyebilirsiniz. Bu API için bir çoklu dolgu da olacaktır.

Örnekler

Artık pop-up'ın ne sunduğu ve nasıl sunduğu hakkında bilgi sahibisiniz. Şimdi birkaç örnek üzerinden gidelim.

Bildirimler

Bu demoda "Panoya kopyala" seçeneği gösterilmektedir bildirimi görürsünüz.

• [popover=manual] kullanılır.
• showPopover ile aksiyon gösterisi pop-up'ı.
• 2000ms zaman aşımından sonra hidePopover ile gizleyin.

Tostlar

Bu demoda, tost stili bildirimlerini göstermek için üst katman kullanılmıştır.

• manual türündeki bir pop-up, kapsayıcı görevi görür.
• Yeni bildirimler pop-up'a eklenir ve pop-up gösterilir.
• Tıklandığında web animasyonları API'si ile ve DOM'den kaldırılırlar.
• Gösterilecek durum mesajı yoksa pop-up gösterilir.

İç içe menü

Bu demo, iç içe yerleştirilmiş bir gezinme menüsünün nasıl çalışacağını gösterir.

• İç içe yerleştirilmiş pop-up'lara izin verdiği için [popover=auto] kullanın.
• Klavyeyle gezinmek için her açılır menünün ilk bağlantısında autofocus tuşunu kullanın.
• Bu, CSS Anchoring API'si için mükemmel bir adaydır. Ancak, bu demoda, özel özellikleri kullanarak konumları güncellemek için az miktarda JavaScript kullanabilirsiniz.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

Bu demo autofocus kullandığı için "tam ekran görünümünde" açılması gerektiğini unutmayın. klavyeyle gezinin.

Medya pop-up'ı

Bu demoda, nasıl pop medyası açabileceğiniz gösterilmektedir.

• Işık kapatma için [popover=auto] kullanılır.
• JavaScript videonun play etkinliğini dinler ve videoyu açar.
• Pop-up'lar popoverhide etkinliği videoyu duraklatır.

Wiki stili pop-up'lar

Bu demolar, medya içeren satır içi içerik ipuçlarını nasıl oluşturabileceğinizi gösterir.

• [popover=auto] kullanılır. Birinin atasından gelmediği için diğerlerini gizler.
• pointerenter üzerinde JavaScript ile gösterilir.
• CSS Anchoring API'si için mükemmel bir aday.

Gezinme Çekmecesi

Bu demo, pop-over kullanarak gezinme çekmecesi oluşturur.

• Işık kapatma için [popover=auto] kullanılır.
• İlk gezinme öğesine odaklanmak için autofocus öğesini kullanır.

Arka planları yönetme

Bu demoda, yalnızca bir ::backdrop öğesinin görünür olmasını istediğiniz birden çok pop-up için arka planları nasıl yönetebileceğiniz gösterilmektedir.

• Görünür pop-up'ların listesini tutmak için JavaScript kullanın.
• Üst katmandaki en alt pop-up'a bir sınıf adı uygulayın.

Özel imleç pop-up'ı

Bu demo, bir canvas öğesini en üst katmana yükseltmek için popover özelliğinin nasıl kullanılacağını ve özel imleç göstermek için nasıl kullanılacağını gösterir.

• canvas platformunu showPopover ve [popover=manual] ile en üst katmana tanıtın.
• Diğer pop-up'lar açıldığında, canvas pop-up'ını gizleyerek üstte olduğundan emin olun.

İşlem sayfası pop-up'ı

Bu demoda, bir pop-up'ı işlem sayfası olarak nasıl kullanabileceğiniz gösterilmektedir.

• display geçersiz kılınacak şekilde pop-up'ın varsayılan olarak gösterilmesini sağlayın.
• İşlem sayfası, pop-up tetikleyiciyle açıldı.
• Pop-up gösterildiğinde, en üst katmana yükseltilir ve görünüme dönüştürülür.
• Telefonunuzu geri vermek için ışık kapatma modu kullanılabilir.

Klavye etkin pop-up

Bu demoda, komut paleti stili kullanıcı arayüzü için pop-up'ı nasıl kullanabileceğiniz gösterilmektedir.

• Pop-up'ı göstermek için cmd + j kullanın.
• input, autofocus ile odaklanıyor.
• Birleşik kutu, ana girişin altında yer alan ikinci bir popover'dir.
• Açılır menü mevcut değilse ışık kapatma işlemi paleti kapatır.
• Anchoring API'si için başka bir aday

Zamanlı pop-up

Bu demoda, dört saniye sonra etkin olmama durumuyla ilgili bir pop-up gösterilir. Oturum kapatma penceresi göstermek için genellikle kullanıcı hakkında güvenli bilgiler barındıran uygulamalarda kullanılan bir kullanıcı arayüzü kalıbı.

• Bir süre işlem yapılmadığında pop-up'ın gösterilmesi için JavaScript kullanın.
• Pop-up gösterisinde zamanlayıcıyı sıfırlayın.

Ekr.Koruyucu

Önceki demoda olduğu gibi, sitenize biraz acayip ekleyebilir ve bir ekran koruyucu ekleyebilirsiniz.

• Bir süre işlem yapılmadığında pop-up'ın gösterilmesi için JavaScript kullanın.
• Zamanlayıcıyı gizlemek ve sıfırlamak için ışığı kapatın.

İmleçle takip etme

Bu demo, bir giriş işaretinin ardından bir pop-up'ın nasıl geçebileceğini gösterir.

• Seçim, önemli etkinlik veya özel karakter girişine göre pop-up'ı göster.
• Pop-up konumunu kapsamlı özel özelliklerle güncellemek için JavaScript kullanın.
• Bu davranış, gösterilen içerik ve erişilebilirlik konusunda dikkatlice düşünmeyi gerektirir.
• Genellikle metin düzenleme kullanıcı arayüzünde ve etiketleyebileceğiniz uygulamalarda görülür.

Kayan işlem düğmesi menüsü

Bu demoda, JavaScript olmadan kayan işlem düğmesi menüsü uygulamak için pop-up'ı nasıl kullanabileceğiniz gösterilmektedir.

• showPopover yöntemiyle manual türü pop-up'ı tanıtın. Bu, ana düğmedir.
• Menü, ana düğmenin hedefi olan başka bir pop-up'tır.
• Menü popovertoggletarget ile açıldı.
• Şovdaki ilk menü öğesine odaklanmak için autofocus kullanın.
• Işığın kapatılması, menüyü kapatır.
• Simge bükümünde :has() kullanılıyor. :has() hakkında daha fazla bilgiye bu makaleden ulaşabilirsiniz.

İşte bu kadar.

Bu, Open UI girişiminin bir parçası olarak yakında kullanıma sunulacak olan pop-up'a giriş niteliğinde. Mantıklı kullanılırsa web platformuna muhteşem bir katkı sağlayacaktır.

Kullanıcı arayüzünü aç seçeneğini işaretlediğinizden emin olun. Pop-over açıklayıcı, API geliştikçe güncel tutulur. Tüm demolar için bu koleksiyonu burada bulabilirsiniz.

"Fark ettiğiniz" için teşekkürler!

Fotoğraf: Madison Oren, Unsplash'te