Pop-up'lar: Yeniden canlanıyor!

Jhey Tompkins

Açık kullanıcı arayüzü girişiminin amacı, geliştiricilerin mükemmel kullanıcı deneyimleri oluşturmasını kolaylaştırmaktır. Bunun için geliştiricilerin karşılaştığı daha sorunlu kalıplarla mücadele etmeye çalışıyoruz. Bunu, daha iyi platform yerleşik API'ler ve bileşenler sağlayarak başarabiliriz.

Bu tür sorun alanlarından biri, Open UI'de "Pop-up'lar" olarak açıklanan pop-up'lardır.

Pop-up'ların uzun zamandır oldukça kutuplaştırıcı bir itibarı var. Bunun nedeni kısmen hem oluşturulma hem de dağıtılma şeklidir. Bu tür içerikleri iyi bir şekilde oluşturmak kolay değildir ancak özellikle zevkli bir şekilde kullanıldığında kullanıcıları belirli öğelere yönlendirerek veya sitenizdeki içeriklerden haberdar ederek çok değerli olabilirler.

Pop-up'lar oluştururken genellikle iki önemli sorunla karşılaşılır:

  • İçeriğinizin geri kalanının üstüne 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 dokümanın geri kalanının üzerinde göstermeyi kolaylaştırır.
  • Erişilebilir hale getirin.
  • En yaygın davranışlar (hafif kapatma, tekil, yığın vb.) için JavaScript gerektirmez.

Pop-up'lar için tam spesifikasyonu OpenUI sitesinde bulabilirsiniz.

Tarayıcı uyumluluğu

Yerleşik Popover API'yi şu anda nerede kullanabilirsiniz? Bu özellik, makalenin yazıldığı tarih itibarıyla Chrome Canary'da "Deneysel web platformu özellikleri" işaretinin arkasında desteklenmektedir.

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

Bu özelliği üretim ortamında test etmek isteyen geliştiriciler için bir Kaynak Deneme sürümü de mevcuttur.

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

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

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

Mevcut çözümler

İçeriğinizi her şeyin üzerinde tanıtmak için şu anda ne yapabilirsiniz? Tarayıcınızda destekliyorsa HTML iletişim kutusu öğesini kullanabilirsiniz. Bu özelliği "Modal" formunda kullanmanız gerekir. Bunun için JavaScript'in etkin olması gerekir.

Dialog.showModal();

Erişilebilirlik konusunda dikkat edilmesi gereken bazı noktalar vardır. Örneğin, Safari 15.4 ve önceki sürümleri kullananlara hitap ediyorsanız a11y-dialog öğesini kullanmanız önerilir.

Ayrıca, pop-up, uyarı veya ipucu tabanlı birçok kitaplıktan birini de kullanabilirsiniz. Bunların çoğu benzer şekilde çalışır.

  • Pop-up'ları göstermek için gövdeye bir kapsayıcı ekleyin.
  • Diğer her şeyin üzerinde olacak şekilde biçimlendirin.
  • Bir öğe oluşturup kapsayıcıya ekleyerek pop-up gösterme
  • Popover öğesini DOM'dan kaldırarak gizleyin.

Bu, geliştiriciler için ek bir bağımlılık ve daha fazla karar gerektirir. Ayrıca, ihtiyacınız olan her şeyi sunan bir teklif bulmak için araştırma yapmanız gerekir. Popover API, ipuçları da dahil olmak üzere birçok senaryoyu desteklemeyi 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

İhtiyacınız olan tek şey bu.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>
göz atın.

Peki burada ne oluyor?

  • Pop-up öğesini bir kapsayıcıya veya başka bir yere koymanız gerekmez. Varsayılan olarak gizlidir.
  • Bu özelliğin görünmesi için JavaScript yazmanız gerekmez. Bu işlem popovertoggletarget özelliği tarafından yönetilir.
  • Göründüğünde en üst katmana yükseltilir. Bu, görüntü alanındaki document öğesinin üzerine yerleştirildiği anlamına gelir. z-index öğesini yönetmeniz veya pop-up'ınızın DOM'daki yeri hakkında endişelenmeniz gerekmez. Kırpılmış atalarıyla birlikte DOM'un derinliklerine yerleştirilmiş olabilir. DevTools'u kullanarak şu anda hangi öğelerin en üst katmanda olduğunu da görebilirsiniz. Üst katman hakkında daha fazla bilgi için bu makaleyi inceleyin.

Geliştirici Araçları üst katman desteğinin gösterildiği GIF

  • "Hafif Kapatma" özelliğini kutudan çıkar çıkmaz kullanabilirsiniz. Yani pop-up'ı, pop-up'ın dışında bir yeri tıklamak, klavyeyle başka bir öğeye gitmek veya Esc tuşuna basmak gibi bir kapatma sinyali göndererek kapatabilirsiniz. Tekrar açıp deneyin.

Popover'ın avantajları neler? Örneği daha ayrıntılı inceleyelim. Sayfada bazı içeriklerin bulunduğu bu demoyu inceleyin.

kalemine bakın.

Bu kayan işlem düğmesi sabit konuma ve yüksek z-index değerine sahip.

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

Pop-up içeriği DOM'a yerleştirilir ancak pop-up'ı açtığınızda sabit konum öğesinin üzerine çıkarılır. Herhangi bir stil ayarlamanıza gerek yoktur.

Pop-up'ın artık bir ::backdrop sözde öğesine sahip olduğunu da fark edebilirsiniz. Üst katmandaki tüm öğeler, stil uygulanabilir bir ::backdrop sözde öğesi alır. Bu örnekte, ::backdrop öğesi azaltılmış alfa arka plan rengi ve temel içeriği bulanıklaştıran bir arka plan filtresiyle biçimlendirilmiştir.

Popover'a stil uygulama

Şimdi pop-up'ın stilini belirlemeye odaklanalım. Varsayılan olarak pop-up'ların sabit bir konumu ve uygulanmış bir dolgusu vardır. Ayrıca display: none özelliği de vardır. Pop-up'ın gösterilmesi için bunu geçersiz kılabilirsiniz. Ancak bu, videoyu en üst katmana yükseltmez.

[popover] { display: block; }
kalemine bakın.

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. Ü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 pop-up, görüntü alanının ortasına yerleştirilir. Ancak bazı durumlarda konumlandırma konusunda açık olmak isteyebilirsiniz. Örneğin:

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

CSS ızgara veya flexbox kullanarak pop-up'ınızın içindeki içeriği düzenlemek istiyorsanız bunu bir öğeye sarmalamak iyi bir fikir olabilir. Aksi takdirde, pop-up en üst katmanda olduğunda display değerini değiştiren ayrı bir kural belirtmeniz gerekir. Varsayılan olarak ayarlandığında, display: none geçersiz kılınarak varsayılan olarak gösterilir.

[popover]:open {
 display: flex;
}
adlı kaleme bakın.

Bu denemeyi denediyseniz pop-up'ın artık açılıp kapandığını 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 sağlamak için özel bir mülk kullanılmaktadır. Ayrıca pop-up'ın ::backdrop bölümüne 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, geçişleri ve animasyonları hareket için bir medya sorgusu altında gruplandırmanız önerilir. Bu, zamanlamanızı da korumanıza 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 işlevinin 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 özellikleri de vardır. Pop-up'a gizleyen bir düğme ekleyelim ve açma/kapatma düğmesini popovershowtarget olarak değiştirelim.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>
göz atın.

Daha önce de belirtildiği gibi, Popover API yalnızca geçmişteki pop-up anlayışımızı kapsamaz. Bildirimler, menüler, ipuçları gibi tüm senaryo türleri için içerik oluşturabilirsiniz.

Bu senaryolardan bazıları farklı etkileşim düzenleri gerektirir. Fareyle üzerine gelme gibi etkileşimler. popoverhovertarget özelliğinin kullanımı deneme aşamasındadır ancak şu anda uygulanmamaktadır.

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

Amaç, fareyle bir öğenin üzerine gelerek hedefi göstermektir. 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. Denemede kullanılan varsayılan davranışta, :hover için açık bir 0.5s yapıldıktan sonra bir pop-up gösteriliyordu. Ardından, kapatmak için hafif bir kapatma veya başka bir pop-up'ın açılması gerekir (Bu konu hakkında daha fazla bilgiyi aşağıda bulabilirsiniz). Bunun nedeni, pop-up gizleme süresinin Infinity olarak ayarlanmasıdır.

Bu süre zarfında, bu işlevi doldurmak için JavaScript 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);
  });
});

Bir öğeyi belirgin bir fareyle üzerine gelme penceresi olarak ayarlamanın avantajı, kullanıcının işleminin kasıtlı olmasını (ör. kullanıcının işaretçisini bir hedefin üzerine getirmesi) sağlamasıdır. Kullanıcıların amacı bu olmadığı sürece pop-up'ı göstermek istemiyoruz.

Pencereyi 0.5s olarak ayarlayarak fareyle hedefin üzerine geleyebileceğiniz bu demoyu deneyin.

adlı kaleme bakın.

Yaygın kullanım alanlarını ve örnekleri incelemeden önce birkaç noktayı ele alalım.

Popover türleri

JavaScript olmayan etkileşim davranışını ele aldık. Peki pop-up davranışının tamamına ne demeli? "Hafif kapatma"yı istemiyorsanız ne olur? Yoksa pop-up'larınıza tekil bir kalıp uygulamak mı istiyorsunuz?

Popover API, davranışları farklı olan üç tür pop-up 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. Ancestral popover'ın tanımı şu şekildedir:
    • DOM konumuna göre ilişkili (alt öğe).
    • popovertoggletarget, popovershowtarget vb. gibi alt öğelerde özellikleri tetikleyerek ilgili öğeleri gösterebilirsiniz.
    • anchor özelliği ile ilişkili (Geliştirme CSS Anchoring API'si altında).
  • Işık kapatma.
  • Açılan, üste ait pop-up'lar olmayan diğer pop-up'ları kapatır. Ancestral popover'larla iç içe yerleştirmenin işleyiş şeklini vurgulayan aşağıdaki demoyu oynatın. popoverhidetarget/popovershowtarget örneklerindeki bazılarını popovertoggletarget olarak değiştirmenin ne gibi değişikliklere yol açtığını öğrenin.
  • Birini hafifçe reddettiğinizde tümü reddedilir ancak gruptaki bir öğeyi reddettiğinizde yalnızca gruptaki kendisinden yukarıdaki öğeler silinir.
kalemine bakın.

[popover=manual]:

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

JavaScript API

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

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

popoverElement.hidePopover()

Gösterilen pop-up'ı dinleyin:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Bir pop-up gösterildiğini dinleyip gösterilmesini iptal edin:

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

Pop-up'ın gizlendiğini dinleyin:

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 az yaygın olan bazı senaryolarda ekstra güç sağlar. Örneğin, bir süre işlem yapılmadığında pop-up gösterin.

Bu demoda sesli pop-up'lar bulunduğundan sesleri çalmak için JavaScript'e ihtiyacımız var. Tıklandığında pop-up'ı gizliyoruz, sesi çalıyoruz ve ardından tekrar gösteriyoruz.

kalemine bakın.

Erişilebilirlik

Popover API'de erişilebilirlik ön plandadır. Erişilebilirlik eşlemeleri, pop-up'ı gerektiğinde tetikleyici öğesiyle ilişkilendirir. Bu, popovertoggletarget gibi tetikleyici özelliklerden birini kullandığınızı varsayarak aria-haspopup gibi aria-* özelliklerini belirtmeniz gerekmediği anlamına gelir.

Odak yönetimi için odağı bir pop-up'ın içindeki bir öğeye taşımak üzere otomatik odaklama özelliğini kullanabilirsiniz. Bu, bir iletişim kutusuyla aynıdır ancak odaklanmayı geri döndürmede fark vardır. Bunun nedeni, hafif kapatma işlemidir. Çoğu durumda, pop-up'ın kapatılması odağın daha önce odaklanan öğeye dönmesine neden olur. Ancak hafif kapatma işleminde, odak alabiliyorsa tıklanan öğeye taşınır. Açıklayıcıdaki odak yönetimiyle 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, odaklanan öğe yeşil bir dış çizgi alır. Klavyenizle arayüzde gezinmeyi deneyin. Bir pop-up kapatıldığında odağın nereye döndürüldüğünü not edin. Sekme tuşuna bastığınızda pop-up'ın kapandığını da fark edebilirsiniz. Bu durum tasarım gereğidir. Pop-up'lar odaklı yönetime sahip olsalar da odağı yakalamazlar. Klavye gezinme ise odak pop-up'tan çıktığında kapatma sinyalini tanımlar.

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ümanda kaydırma yapılırsa. Bu ipucu, görüntü alanı tarafından kesilebilir. Bu sorunu çözmek için "Yüzen kullanıcı arayüzü" gibi mevcut JavaScript teklifleri vardır. Bu durumun önüne geçmeniz ve istediğiniz bir konum sırasını kullanabilmeniz için ipuçlarını yeniden konumlandırırlar.

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 Anchor Konumlandırma" API'si, öğ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, ankrajın görüntü alanındaki konumuna göre değişir.

adlı kaleme göz atın.

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);
  }
}

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

Örnekler

Artık pop-up'ın neler sunduğu ve nasıl sunduğu hakkında bilgi sahibisiniz. Şimdi bazı örnekleri inceleyelim.

Bildirimler

Bu demoda "Panoya kopyala" bildirimi gösterilmektedir.

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

Tostlar

Bu demoda, durum mesajı stilindeki bildirimleri göstermek için üst katman kullanılır.

  • Kapsayıcı olarak manual türüne sahip bir pop-up kullanılı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 pop-up yoksa pop-up gizlenir.
'ye bakın.

İç içe yerleştirilmiş menü

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

  • İç 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 simgesini kullanın.
  • Bu, CSS Anchoring API için mükemmel bir adaydır. Ancak bu demo için özel mülkleri kullanarak konumları güncellemek üzere 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 demoda autofocus kullanıldığı için klavye gezinme için "tam ekran görünümünde" açılması gerektiğini unutmayın.

belgesine bakın.

Medya pop-up'ı

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

  • Işığı kapatmak için [popover=auto] kullanılır.
  • JavaScript, videonun play etkinliğini dinler ve videoyu gösterir.
  • Pop-up'lar popoverhide etkinliği videoyu duraklatır.
kalemine bakın.

Wiki stili pop-up'lar

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

  • [popover=auto] kullanılır. Birini göstermek, atalara ait olmadığı için diğerini gizler.
  • JavaScript ile pointerenter'te gösterilir.
  • CSS Anchoring API için mükemmel bir aday daha.
.

Bu demoda, pop-up kullanılarak bir gezinme çekmecesi oluşturulur.

  • Işığı kapatmak 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'ün görünür olmasını istediğiniz birden fazla pop-up için arka planları nasıl yönetebileceğiniz gösterilmektedir.

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

Özel imleç pop-up'ı

Bu demoda, bir canvas öğesini üst katmana taşımak ve özel bir imleci göstermek için popover öğesinin nasıl kullanılacağı gösterilmektedir.

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

İş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çılır.
  • Pop-up gösterildiğinde, en üst katmana yükseltilir ve görünüme dönüştürülür.
  • Işıklı reddi, ürünü iade etmek için kullanılabilir.
.

Klavyeyle etkinleştirilen pop-up

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

  • Pop-up'ı göstermek için cmd + j tuşlarını kullanın.
  • input, autofocus ile odaklanmış.
  • Açılır liste kutusu, ana girişin altında konumlandırılmış ikinci bir popover öğesidir.
  • Açılır menü yoksa hafif reddediş paleti kapatır.
  • Anchoring API için başka bir aday
adlı kaleme göz atın.

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ı.

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

Ekr.Koruyucu

Önceki demoya benzer şekilde, sitenize biraz eğlence katmak için ekran koruyucu ekleyebilirsiniz.

  • Belirli bir süre boyunca 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çle takip

Bu demoda, giriş imlecini takip eden bir pop-up'ın nasıl oluşturulabileceği gösterilmektedir.

  • 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 kalıp, gösterilen içerik ve erişilebilirlik açısından dikkatli bir şekilde düşünülmelidir.
  • Genellikle metin düzenleme kullanıcı arayüzünde ve etiketleyebileceğiniz uygulamalarda görülür.
kalemine göz atın.

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

Bu demoda, JavaScript olmadan yüzen 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ı.
  • Gösterilen ilk menü öğesine odaklanmak için autofocus simgesini kullanın.
  • Hafif kapatma işlemi menüyü kapatır.
  • Simge bükülmesinde :has() kullanılıyor. :has() hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.
belgesine bakın.

İşte bu kadar.

Bu, Açık Kullanıcı Arayüzü girişimi kapsamında kullanıma sunulacak pop-up'a giriş niteliğinde bir açıklamadır. Mantıklı bir şekilde kullanıldığında web platformuna harika bir katkı olacaktır.

Açık kullanıcı arayüzü bölümüne göz atın. Pop-up açıklama, API geliştikçe güncellenir. Tüm demolar için bu koleksiyonu burada bulabilirsiniz.

Ziyaretiniz için teşekkürler.

Unsplash'taki Madison Oren tarafından çekilen fotoğraf