Pop-up'lar: Yeniden canlanıyor!

Jhey Tompkins

Açık Kullanıcı Arayüzü girişiminin amacı, geliştiricilerin mükemmel kullanıcı deneyimleri hazırlamasını kolaylaştırmaktır. Bunun için geliştiricilerin karşılaştığı daha sorunlu kalıplarla baş etmeye çalışıyoruz. Bunu, platformda yerleşik olarak bulunan daha iyi API'ler ve bileşenler sağlayarak yapabiliriz.

Bu tür bir sorun alanlarından biri, Açık Kullanıcı Arayüzü'nde "Pop-up'lar" olarak tanımlanan pop-up'lardır.

Pop-up'lar uzun zamandır kutuplaştırıcı bir üne sahipti. Bu, kısmen hem derlenip hem de dağıtılma şekillerinden kaynaklanıyor. İyi oluşturmak kolay bir kalıp değildir, ancak özellikle de bilinçli bir şekilde kullanıldıklarında kullanıcıları belirli şeylere yönlendirerek veya sitenizdeki içerikten haberdar olmalarını sağlayarak büyük değer sağlayabilirler.

Pop-up reklamlar oluştururken genellikle iki önemli husus vardır:

  • İçeriğinizin geri kalanının üst kısmına uygun bir yere yerleştirilmesini sağlamak için ne yapmalısınız?
  • Nasıl erişilebilir olur (klavye dostu, odaklanılabilir vb.).

Yerleşik Popover API'sinin çeşitli hedefleri vardır. Bunların temel amacı, geliştiricilerin bu kalıbı oluşturmasını kolaylaştırmaktır. Bu hedefler arasında şunlar öne çıkıyor:

  • Bir öğeyi ve alt öğelerini dokümanın geri kalanının üzerinde görüntülemeyi kolaylaştırın.
  • Siteniz erişilebilir olsun.
  • En yaygın davranışlar (ışık kapatma, tekilton, yığma vb.) için JavaScript gerekli değildir.

Pop-up spesifikasyonlarının tamamını OpenUI sitesinde inceleyebilirsiniz.

Tarayıcı uyumluluğu

Yerleşik Popover API'yi artık nerelerde kullanabilirsiniz? Bu özellik, Chrome Canary'de, yazıldığı sırada "Deneysel web platformu özellikleri" bayrağının arkasında desteklenmektedir.

Bu işareti etkinleştirmek için Chrome Canary'yi açıp chrome://flags adresini ziyaret edin. Ardından "Deneysel web platformu özellikleri" işaretini etkinleştirin.

Bunu üretim ortamında test etmek isteyen geliştiriciler için bir Kaynak Denemesi de vardır.

Son olarak, API için geliştirilmekte olan bir polyfill mevcuttur. github.com/oddbird/popup-polyfill adresindeki depoya göz atmayı unutmayın.

Pop-up desteğini şunları kullanarak kontrol edebilirsiniz:

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

Mevcut çözümler

İçeriğinizi diğer her şeyin üzerinde öne çıkarmak için şu anda ne yapabilirsiniz? Tarayıcınızda destekleniyorsa HTML İletişim Kutusu öğesini kullanabilirsiniz. "Modal" biçimde kullanmanız gerekir. Bu da JavaScript'in kullanılabilmesini gerektirir.

Dialog.showModal();

Erişilebilirlikle ilgili bazı noktalar vardır. Örneğin, Safari'nin 15.4 sürümünün altındaki kullanıcıları için hizmet sunuyorsanız a11y-dialog kullanmanız ö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 kapsayıcı ekleyin.
  • Diğer tüm öğelerin üzerinde yer alacak şekilde biçimlendirin.
  • Bir öğe oluşturup kapsayıcıya ekleyerek pop-up'ın gösterilmesini sağlayın.
  • DOM'den pop-up öğesini kaldırarak bu öğeyi gizleyin.

Bu da daha fazla bağımlılık gerektirir ve geliştiriciler için daha fazla karar gerektirir. Ayrıca, ihtiyacınız olan her şeyi sunan bir teklif bulmak için de araştırma yapmanız gerekir. Popover API, ipuçları dahil olmak üzere birçok senaryoya yanıt vermeyi amaçlar. Amaç, bu yaygın senaryoların tümünü ele alarak geliştiricileri başka bir karar almak zorunda bırakmadan kendi deneyimlerini oluşturmaya odaklanmaktır.

İlk pop-up'ınız

Tüm ihtiyacınız olan bu.

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

Peki, burada neler oluyor?

  • Popover öğesini bir kapsayıcıya veya başka bir yere yerleştirmenize gerek yoktur; öğe varsayılan olarak gizlidir.
  • Kodun görünmesi için JavaScript yazmanız gerekmez. Bu işlem, popovertoggletarget özelliği tarafından işlenir.
  • Göründüğünde en üst katmana yükseltilir. Yani görüntü alanında document öğesinin üzerine çıkar. z-index öğesini yönetmeniz veya pop-up'ınızın DOM'nin neresinde olduğu konusunda endişelenmeniz gerekmez. Üst öğeleri kırpılarak DOM'de iç içe yerleştirilmiş olabilir. Geliştirici Araçları'nı kullanarak şu anda üst katmanda olan öğeleri de görebilirsiniz. Üst katman hakkında daha fazla bilgi için bu makaleyi inceleyin.

Geliştirici Araçları üst katman desteğini gösteren GIF

  • Kutudan çıktığında "Işık Kapat" seçeneği sunulur. Yani, pop-up'ın dışına tıklama, klavyede başka bir öğeye gitme veya Esc tuşuna basma gibi bir kapatma sinyaliyle pop-up'ı kapatabilirsiniz. Tekrar açıp deneyin.

Pop-up ile başka neler elde edersiniz? Örneği daha da ileri götürelim. Sayfada bazı içeriklere yer vererek bu demoyu deneyebilirsiniz.

Bu kayan işlem düğmesi, yüksek bir z-index ile sabit konuma sahip.

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

Pop-up içeriği DOM'ye yerleştirilir, ancak pop-up'ı açtığınızda bu sabit konum öğesinin yukarısına yükseltilir. Herhangi bir stil ayarlamanız gerekmez.

Pop-over'ın artık bir ::backdrop sözde öğesine sahip olduğunu da fark edebilirsiniz. Üst katmandaki tüm öğeler, stile uygun ::backdrop sözde öğe alır. Bu örnekte, ::backdrop stili, azaltılmış alfa arka plan rengi ve arka plan filtresiyle temel içeriği bulanıklaştırmaktadır.

Pop-up'ın stilini ayarlama

Şimdi pop-up'ı şekillendirmeye odaklanalım. Pop-up'ın varsayılan olarak sabit bir konumu ve bazı dolguları vardır. display: none özelliği de var. Pop-up'ı göstermek için bunu geçersiz kılabilirsiniz. Ancak bu, katmanın en üst katmana çıkmasına neden olmaz.

[popover] { display: block; }

Pop-up'ınızı nasıl tanıttığınızdan bağımsız olarak, bir pop-up'ı en üst katmana çıkardıktan sonra yerleştirmeniz veya konumlandırmanız gerekebilir. Üst katmanı hedefleyip

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

Varsayılan olarak, pop-up seçeneği margin: auto öğesi kullanılarak görüntü alanının ortasına yerleştirilir. Ancak bazı durumlarda konumlandırma hakkında açık olmak isteyebilirsiniz. Örneğin:

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

CSS ızgarası veya flexbox'ı kullanarak pop-up'ınızın içine içerik yerleştirmek istiyorsanız bunu bir öğe içine almanız önerilir. Aksi takdirde, pop-over üst katmanda olduğunda display değerini değiştiren ayrı bir kural bildirmeniz gerekir. Varsayılan olarak ayarlanırsa bu etiket, display: none değerini geçersiz kılarak gösterilir.

[popover]:open {
 display: flex;
}

Bu demoyu denerseniz pop-up'ın sürekli olarak artıp azaldığını göreceksiniz. :open sözde seçiciyi kullanarak pop-up'ları açıp kapatabilirsiniz. :open sözde seçici, gösterilen (ve dolayısıyla üst katmanda bulunan) pop-up'larla eşleşir.

Bu örnekte, geçişi sağlamak için özel bir mülk 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;
}

Burada bir ipucu, geçişleri ve animasyonları hareket için bir medya sorgusu altında gruplandırmaktır. Bu, zamanlamalarınızı korumanıza da yardımcı olabilir. Bunun nedeni, özel mülk aracılığıyla popover ile ::backdrop arasında değerleri paylaşılamamanı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 kullanıldı. Kapatmak için "Az kapat"ı kullanıyoruz. Ancak, kullanabileceğiniz popovershowtarget ve popoverhidetarget özelliklerinden de yararlanabilirsiniz. Bunu gizleyen bir pop-up'a düğme 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 de bahsedildiği gibi Popover API'si, eski pop-up kavramımızdan daha fazlasını kapsıyor. Bildirimler, menüler, araç ipuçları vb. gibi her tür senaryo için uygulama oluşturabilirsiniz.

Bu senaryolardan bazıları için farklı etkileşim kalıpları gerekir. Fareyle üzerine gelme gibi etkileşimler. Bir popoverhovertarget özelliği kullanılarak denemeler yapıldı, ancak şu anda 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 üzerine gelindiğinde pop-up'ın tepki verdiği öğenin üzerine gelme ve öğenin dışına alınma zaman aralığını tanımlar. Denenen varsayılan davranışta, :hover tutarında açıkça 0.5s gösterildikten sonra bir pop-up gösterisi sunuldu. Bu durumda ışığın kapatılması veya başka bir pop-up'ın açılması gerekir (İleride bununla ilgili daha fazla bilgi paylaşacağız). Bunun nedeni, pop-over gizleme süresinin Infinity olarak ayarlanmasıydı.

Bu arada, bu işlevi çoklu doldurmak 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 yararı, kullanıcının eylemini bilinçli bir şekilde yapmasını sağlamasıdır (örneğin, kullanıcı işaretçisini bir hedefin üzerine geçirir). Amaçları öyle olmadığı sürece pop-up'ı göstermek istemiyoruz.

Pencere 0.5s olacak şekilde hedefin üzerine gelebileceğiniz bu demoyu deneyin.

Yaygın kullanım alanlarını ve örnekleri incelemeden önce birkaç şeye göz atalım.

Pop-up türleri

JavaScript olmayan etkileşim davranışlarını ele aldık. Peki bir bütün olarak pop-up'ın davranışına ne dersiniz? "Hafif kapat"ı istemiyorsanız ne olur? Yoksa pop-up'larınıza bir tekil kalıp mı uygulamak istiyorsunuz?

Popover API'si, davranışı farklı olan üç pop-up kullanma türünü belirtmenize olanak tanır.

[popover=auto]/[popover]:

  • İç içe yerleştirme desteği. Bu durum yalnızca DOM'de iç içe yerleştirildiği anlamına da gelmez. Atalardan gelen popover'ın tanımı şu şekildedir:
    • DOM konumuna göre (alt öğe) ilişkilidir.
    • popovertoggletarget, popovershowtarget gibi alt öğelerde özellikleri tetikleyerek ilişkili hale gelir.
    • anchor özelliğiyle ilişkilidir (Geliştirme aşamasında olan CSS Anchoring API'si).
  • Işığı kapat.
  • Açmak, ana pop-up'lar olmayan diğer pop-up'ları kapatır. Aşağıdaki demoda, atalardan gelen popover'larla iç içe geçmenin nasıl işlediğini bir kez daha inceleyin. Bazı popoverhidetarget/popovershowtarget örneklerini popovertoggletarget olarak değiştirmenin değişiklikleri nasıl değiştirdiğini görün.
  • Işıklardan birini kapattığınızda her şey gösterilir. Gruptakilerden birinin kapatılması yalnızca grupta o grubun üzerinde olanların kapatılmasını sağlar.

[popover=manual]:

  • Diğer pop-up'ları kapatmaz.
  • Işık kapatılmaz.
  • Tetikleyici öğesi veya JavaScript aracılığıyla açıkça kapatmayı gerektirir.

JavaScript API

Pop-up'larınız üzerinde daha fazla kontrole ihtiyacınız olduğunda JavaScript'i kullanarak işlerinize yaklaşabilirsiniz. Hem showPopover hem de hidePopover yöntemi alırsınız. Ayrıca dinleyebileceğiniz popovershow ve popoverhide etkinliğiniz var:

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

popoverElement.hidePopover()

Görüntülenen pop-up'ı dinleyin:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Pop-up'ın gösterilmesini dinleyin ve gösterilmesini iptal edin:

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

Gizlenen pop-up'ı dinleyin:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Gizlenmiş bir pop-up'ı iptal edemezsiniz:

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

Üst katmanda pop-up olup olmadığını kontrol edin:

popoverElement.matches(':open')

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

Bu demoda pop-up'lar olduğu için sesi çalmak için JavaScript gerekir. Tıklandığında pop-up'ı gizler, sesi çalar ve sonra tekrar gösteririz.

Erişilebilirlik

Popover API, erişilebilirlik konusundaki düşüncelerin ön saflarında yer alıyor. Erişilebilirlik eşlemeleri, gerektiğinde pop-up'ı tetikleyici öğesiyle ilişkilendirir. Bu nedenle, popovertoggletarget gibi tetikleyici özelliklerden birini kullandığınızı varsayarsak 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 durum, iletişim kutusuyla aynıdır ancak odak geri döndüğünde ortaya çıkan fark ve bunun nedeni ışığın sönmesidir. Çoğu durumda, pop-up'ın kapatılması odağı önceden odaklanılan öğeye döndürür. Ancak ışık kapatıldığında odak, tıklanan bir öğeye odaklanabiliyorsa hareket ediyor. Açıklayıcıda odak yönetimi ile ilgili bölüme göz atın.

Çalıştığını görmek için bu demonun "tam ekran sürümünü" açmanız gerekir.

Bu demoda odaklanılan öğenin dış çizgisi yeşildir. Klavyenizle arayüzün etrafında dönmeyi deneyin. Pop-up kapatıldığında odağın nereye döndüğünü not edin. Sekme tuşuna bastığınızda açılan pencerenin kapandığını da fark edebilirsiniz. Bu tasarım gereğidir. Pop-up reklamlar odaklanma yönetimine sahip olsa da odaklanmayı yakalamaz. Odak pop-up'ın dışına çıktığında klavyeyle gezinme bir kapatma sinyali tanımlar.

Demirleme (yapım aşamasında)

Pop-up'lar için dikkat edilmesi gereken zor bir kalıp, öğeyi tetikleyicisine sabitlemektir. Örneğin, bir ipucu tetikleyicisinin üzerinde gösterilecek şekilde ayarlandığı halde doküman kaydırılıyorsa. Bu ipucu görüntü alanı tarafından kesilebilir. Bu konuyla ilgilenilmesi gereken "Kayan kullanıcı arayüzü" gibi JavaScript teklifleri bulunmaktadır. Bunun olmasını önlemek ve istenen konum sırasını esas almak için ipucunu yeniden konumlandırırlar.

Ancak, bunu kendi stillerinizle tanımlayabilmenizi istiyoruz. Bu sorunu çözmek için Popover API'siyle birlikte geliştirilmekte olan tamamlayıcı bir API vardır. "CSS Anchor Positioning" API'si, öğeleri diğer öğelere bağlamanızı sağlar ve bunu, öğeleri görüntü alanı tarafından kesilmeyecekleri şekilde yeniden konumlandıracak şekilde yapar.

Bu demo, mevcut durumunda Sabitleme API'sini kullanır. Teknenin konumu, çapanın görüntü alanındaki konumuna karşılık gelir.

Bu demonun çalışmasını sağlayan CSS snippet'ini burada bulabilirsiniz. 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);
  }
}

Özelliklere buradan göz atabilirsiniz. Bu API için bir çoklu dolgu da olacak.

Örnekler

Pop-up'ın özelliklerini ve nasıl sunduğunu öğrendiniz. Şimdi birkaç örneğe göz atalım.

Bildirimler

Bu demoda "Panoya kopyala" bildirimi gösterilmektedir.

  • [popover=manual] kullanılır.
  • Hareket halindeyken, showPopover ifadesini içeren pop-up'ı gösterin.
  • 2000ms zaman aşımından sonra hidePopover ile gizleyin.

Tostlar

Bu demo, durum mesajı stili bildirimleri göstermek için en üst katmanı kullanır.

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

İç içe menü

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

  • İç içe yerleştirilmiş pop-up'lara izin verdiği için [popover=auto] kullanın.
  • Klavyede gezinmek için her açılır listenin ilk bağlantısında autofocus kullanın.
  • Bu, CSS Anchoring API 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ığından, klavyeyle gezinmek için demonun "tam ekran görünümünde" açılması gerektiğini unutmayın.

Pop-up medya

Bu demo, pop-up'ları nasıl açabileceğinizi gösterir.

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

Wiki tarzı pop-up'lar

Bu demolarda, medya içeren satır içi içerik ipuçlarını nasıl oluşturabileceğiniz gösterilmektedir.

  • [popover=auto] kullanılır. Birinin gösterildiği, atalarından olmadığı için diğerlerini gizler.
  • pointerenter üzerinde JavaScript ile gösteriliyor.
  • CSS Anchoring API için bir başka mükemmel aday.

Bu demo, açılır menü kullanılarak gezinme çekmecesi oluşturur.

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

Arka planları yönetme

Bu demo, tek bir ::backdrop görünür olmasını istediğiniz birden fazla pop-up pencere için arka planları nasıl yönetebileceğinizi gösterir.

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

Özel imlecin pop-up'ı

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

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

İşlem sayfası pop-up'ı

Bu demo, pop-up'ı işlem sayfası olarak nasıl kullanabileceğinizi gösterir.

  • Pop-over'ın varsayılan olarak display işaretini geçersiz kılmasını sağlayın.
  • Actionsheet, popover tetikleyicisiyle açılır.
  • Açılır menü gösterildiğinde, üst katmana yükseltilir ve görünüme dönüştürülür.
  • Sesi kapatmak için ışık kapatma özelliği kullanılabilir.

Klavye etkinleştirilmiş pop-up

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

  • Pop-up'ı göstermek için cmd + j tuşlarına basın.
  • input, autofocus metriğine odaklanıyor.
  • Birleşik kutu, ana girişin altına yerleştirilmiş ikinci bir popover'dir.
  • Açılır liste mevcut değilse ışığı kapatmak, paleti kapatır.
  • Sabitleme API'si için bir başka aday

Zamanlı pop-up

Bu demo, dört saniye sonra etkin olmama durumunu gösterir. Oturum kapatma iletişim kutusunu göstermek için genellikle kullanıcıyla ilgili güvenli bilgileri bulunduran uygulamalarda kullanılan kullanıcı arayüzü kalıbı.

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

Ekr.Koruyucu

Önceki demoya benzer şekilde, sitenize biraz ilgi çekici bir hava katabilir ve bir ekran koruyucu ekleyebilirsiniz.

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

İmleç takip

Bu demo, bir pop-up'ın giriş imlecini takip etmesini nasıl sağlayabileceğinizi gösterir.

  • Seçime, önemli etkinliğe veya özel karakter girişine göre pop-up'ı gösterin.
  • Popover konumunu kapsamlı özel özelliklerle güncellemek için JavaScript kullanın.
  • Bu yöntemde, gösterilen içerik ve erişilebilirlik konusunda dikkatli düşünmek gerekir.
  • 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 demo, JavaScript olmadan kayan bir işlem düğmesi menüsü uygulamak için pop-up'ı nasıl kullanabileceğinizi gösterir.

  • showPopover yöntemiyle manual türü pop-up'ını tanıtın. Bu ana düğmedir.
  • Menü, ana düğmenin hedefi olan başka bir pop-up penceredir.
  • Menü popovertoggletarget ile açıldı.
  • Programdaki ilk menü öğesine odaklanmak için autofocus öğesini kullanın.
  • Işık kapatıldığında menüyü kapatır.
  • Simge bükülmesinde :has() kullanılıyor. :has() hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.

İşte bu kadar.

Bu, Açık Kullanıcı Arayüzü girişiminin bir parçası olarak ilerleyen zamanlarda açılan popover'a giriş niteliğinde. Mantıklı bir şekilde kullanılırsa web platformuna mükemmel bir katkı sağlayacak.

Kullanıcı arayüzünü açma bölümünü kontrol etmeyi unutmayın. Pop-over açıklayıcı, API geliştikçe güncel tutulur. Tüm demolar için bu koleksiyona göz atabilirsiniz.

YouTube'u "izlediğiniz" için teşekkürler!

Fotoğrafçı: Madison Oren'in Unsplash'teki fotoğrafı