İletişim kutuları ve modlar, çoğu web uygulamasının ayrılmaz parçalarıdır. Bunları elle oluşturmak karmaşık bir iş olmasa da, herhangi bir web geliştiricisi için hızla sıkıcı hale gelen bir iştir. Bunları elle oluşturmanın genel alternatifi, başkası tarafından oluşturulmuş bir bileşeni kullanmaktır.

Yine de bu yaklaşımla ilgili birkaç sorun var. O kadar çok seçenek var ki, hangi bileşenin en iyi kullanılacağını bilmek zorlaşıyor ve bu tür bileşenlerin görünümünü özelleştirmek bazen bir diyalog oluşturmak kadar sıkıcı olabilir. elle. Neyse ki başka bir alternatif daha var: HTML iletişim öğesi.

Diyalog Öğesi Nedir?

HTML iletişim öğesi, geliştiricilerin özel iletişim kutuları ve modlar oluşturmasına olanak tanıyan yerleşik bir HTML etiketidir (div veya span gibi). Diyalog öğesi, 2014'ten beri Chrome ve Opera'da kullanılmaktadır, ancak yalnızca son zamanlarda tüm büyük tarayıcılar tarafından desteklenmektedir.

İletişim Öğesini Neden Kullanmalı?

Diyalog öğesini kullanmanın birincil nedeni kolaylıktır. Tek bir HTML etiketi ve birkaç JavaScript satırından başka bir şey olmadan, satır içi görünebilen veya modal olarak görünebilen iletişim kutuları oluşturmayı kolaylaştırır.

instagram viewer

İletişim öğesi, özel bir iletişim kutusu oluşturma ve hata ayıklama gereksinimini ortadan kaldırır veya başka birinin bileşenini içe aktarır. CSS ile stil vermek de çok kolay.

İletişim Öğesi için Tarayıcı Desteği

Ne yazık ki, diyalog öğesi için tarayıcı desteği daha iyi olabilirdi. Bazı uyarılarla birlikte, Mart 2022'den itibaren tüm büyük tarayıcıların en son sürümlerinde desteklenmektedir.

Firefox 98'den daha eski herhangi bir Firefox tarayıcısı, yalnızca tarayıcı ayarlarında manuel olarak etkinleştirildiyse bunu destekleyecektir ve Safari 15.4'ten önceki herhangi bir Safari sürümü onu hiç desteklemiyorsa. Tam tarayıcı desteği ayrıntıları şurada mevcuttur: kullanabilirmiyim.

Neyse ki bu, diyalog öğesinin kullanılamaz olduğu anlamına gelmez. Google Chrome ekibi, bulabileceğiniz bir çoklu doldurma sağlar Github yerel olarak desteklenmediği tarayıcılarda bile destek sağlayan iletişim öğesi için.

Geçerli biçiminde, iletişim öğesinde erişilebilirlik sorunları olabilir, bu nedenle aşağıdaki gibi özel bir iletişim bileşeni kullanmak daha uygun olabilir: a11y-diyalog üretim uygulamalarında.

İletişim Öğesi Nasıl Kullanılır

İletişim öğesinin nasıl kullanılacağını göstermek için, onu ortak bir web sitesi özelliği oluşturmak için kullanacaksınız: silme düğmesi için bir onay modeli.

Takip etmek için gereken tek şey tek bir HTML dosyasıdır.

1. HTML Dosyasını Ayarlayın

Söz konusu dosyayı oluşturup buna index.html adını vererek başlayın.

Ardından, HTML dosyasının yapısını oluşturun ve sayfanın tüm cihazlarda düzgün bir şekilde görüntülenmesi için sayfa hakkında bazı temel meta bilgileri sağlayın.

index.html içine aşağıdaki kodu yazın:

<!DOCTYPE html>
<html dili="tr">
<kafa>
<meta karakter kümesi="UTF-8">
<meta http-eşdeğeri="X-UA-Uyumlu" içerik="IE=kenar">
<meta adı="görüş alanı" içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0">
<Başlık>iletişim demosu</title>
</head>
<stil></style>


<gövde></body>
<senaryo></script>
</html>

Bu proje için gerekli olan tüm kurulum bu.

2. İşaretlemeyi Yazma

Ardından, silme düğmesinin yanı sıra iletişim öğesi için işaretlemeyi yazın.

index.html'nin gövde etiketine aşağıdaki kodu yazın:

<div sınıfı="düğme kabı">
<buton>
Silmek öğe
</button>
</div>
<diyalog>
<div>
 İstediğine emin misin silmekBu öğe?
</div>
<div>
<düğme sınıfı="kapat">
 Evet
</button>
<düğme sınıfı="kapat">
 Numara
</button>
</div>
</dialog>

Yukarıdaki HTML şunları oluşturacaktır:

  • Bir silme düğmesi.
  • Diyalog öğesi.
  • İletişim kutusunun içinde iki düğme.

Tarayıcınızda index.html açıksa, ekranda görünen tek öğe sil düğmesi olacaktır. Bu, yanlış bir şey olduğu anlamına gelmez, diyalog öğesinin görünür olması için sadece biraz JavaScript'e ihtiyacı vardır.

3. JavaScript ekleme

Şimdi, bir kullanıcı sil düğmesine tıkladığında diyaloğu açacak kodu ve diyaloğun kapanmasına izin verecek kodu yazın.

index.html'nin komut dosyası etiketine şunu yazın:

const mod = belge.querySelector("iletişim kutusu")
Document.querySelector(".button-container düğmesi").addEventListener("Tıklayın", () => {
modal.showModal();
});
const kapatBtns = belge.getElementsByClassName("kapat");
for (btn of closeBtns) {
 btn.addEventListener("Tıklayın", () => {
modal.kapat();
 })
}

bu kod querySelector yöntemini kullanır düğmelere ve iletişim kutusuna referanslar almak için. Daha sonra her düğmeye bir tıklama olay dinleyicisi ekler.

aşina olabilirsin JavaScript'te kendiniz kullanabileceğiniz olay dinleyicileri. Sil düğmesine eklenen olay dinleyicisi, düğme tıklandığında iletişim kutusunu görüntülemek için showModal() yöntemini çağırır.

Modal içindeki her düğme, tıklandığında iletişim kutusunu gizlemek için close() yöntemini kullanan bir olay dinleyicisine sahiptir.

Kodda close() yöntemini çağıran bir JavaScript olmasa bile, kullanıcılar klavyelerindeki kaçış tuşuna basarak modu da kapatabilirler.

Artık bu JavaScript yerinde olduğuna göre, bir kullanıcı sil düğmesine tıklarsa modal açılır ve evet veya hayır düğmesine tıklandığında mod kapatılır.

Açılan modal şöyle görünmelidir:

Unutulmaması gereken bir nokta, index.html'de CSS olmamasına rağmen dialog öğesinin bazı stiller ile birlikte gelmesidir. Modal zaten ortalanmıştır, bir sınırı vardır, genişlik içerikle sınırlıdır ve bazı varsayılan dolgulara sahiptir.

Kullanıcılar, mod açıkken arka planda hiçbir şeyle etkileşime giremez (tıklayamaz, seçemez).

Diyalog öğesi, bir modal olarak değil, sayfanın akışının bir parçası olarak da kendini gösterebilir. Denemek için JavaScript'teki ilk olay dinleyicisini şu şekilde değiştirin:

Document.querySelector(".button-container düğmesi").addEventListener("Tıklayın", () => { modal.show(); });

Bu kodda değişen tek şey, kodun showModal() yöntemi yerine show() yöntemini çağırıyor olmasıdır. Şimdi, bir kullanıcı öğeyi sil düğmesine tıkladığında, modal şu ​​şekilde satır içi açılmalıdır:

4. Stil Ekle

Ardından, CSS yazarak iletişim kutusunun görünümünü ve arka planını özelleştirin.

CSS, iletişim kutusunun kenarlığını azaltacak, maksimum genişliğini sınırlayacak ve ardından arka planı koyulaştıracak ve ayrıca düğmelere biraz stil ekleyecektir.

İletişim kutusunun stilini belirlemek basittir, ancak iletişim kutusunun arka planını hedefleyen stil eklemek için arka plan sözde sınıfı gereklidir.

Aşağıdaki kodu index.html'nin stil etiketine yapıştırın:

diyalog:: zemin {
 arka plan: siyah;
opaklık: 0.5;
}
düğme {
 sınır yarıçapı: 2 piksel;
 arka plan rengi: beyaz;
 kenarlık: 1 piksel düz siyah;
 kenar boşluğu: 5 piksel;
 kutu gölgesi: 1 piksel 1 piksel 2 piksel gri;
}
diyalog {
 maksimum genişlik: 90vw;
 kenarlık: 1 piksel düz siyah;
}

İletişim kutusu açıldığında, şimdi şöyle görünmelidir:

Ve tamamen işlevsel bir iletişim kutusu oluşturdunuz.

İletişim Öğesi, Modal Oluşturmanın Harika Bir Yoludur

Web geliştiricileri, yakın zamanda tüm büyük tarayıcılarda destek kazanan HTML iletişim öğesini kullanarak artık tamamen işlevsel, bir HTML etiketi ve birkaç satır JavaScript ile ve üçüncü bir tarafa güvenmeye gerek kalmadan kolayca özelleştirilebilir modlar ve diyaloglar çözüm.

İletişim öğesi, geliştiricilerin onu desteklemeyen tarayıcı sürümlerinde iletişim kutusunu kullanmasına olanak tanıyan, Google Chrome ekibi tarafından sağlanan bir çoklu dolguya sahiptir.