Javascript, HTML ve CSS ile Kalıcı Kutuları için Nasıl Yapılır Kılavuzu

Geçenlerde fullstack Ruby uygulamaları oluştururken Javascript ile çalışmaya başladım. Bildiğiniz gibi, Javascript, kullanıcıların veya istemcilerin bir web sayfasıyla etkileşime girmesine ve kullanıcı etkileşimi temelinde DOM için dinamik olarak yeni içerik oluşturmasına olanak tanır. Ruby on Rails’deki kodlama ile karşılaştırıldığında (her bir işleyicinin tam sayfa yenileme gerektirdiği), Javascript ile kullanıcı etkileşimlerine göre çeşitli sayfa öğelerini yeniden işleme yeteneği, 1994’te ve şimdiye kadarki geliştirme becerilerimi getirdi. Temel Javascript anlayışımla, artık projelerimde uygulama yapmak için sabırsızlandığım etkileşimli bir web öğesi oluşturabilirim: mesaj kutuları - veya açılır pencereler.

Bir modal veya iletişim kutusu, bazı belirli kullanıcı etkileşimlerinden sonra tarayıcıda görünen bir mesaj kutusudur. HTML, CSS ve Javascript ile siteniz için modal bir kutu oluşturma özelliklerine girmeden önce, önce karşılaşabileceğiniz çeşitli mesaj kutusu türlerini gözden geçirelim.

Mesaj Kutuları Türleri

Uyarılar

Bir uyarı, genellikle tarayıcıda kilitli olan ve sayfadan çıkarılmadan ve kaybolmadan önce bir kullanıcı yanıtı veya etkileşim gerektiren bir mesaj kutusudur. Belki müşteriden bilgi almasını istersiniz (Kullanım Koşulları) ya da sayfanın kendisi bir formun tamamlandığını onaylar. Ancak, uyarı reddedilinceye kadar, müşteri sayfanın geri kalanıyla etkileşime giremez.

Uyarı Mesajı Kutusu

Aniden belirmek

Bir pop-up tarayıcıda anında etkileşim veya dikkat gerektirmeyen bir yapışkan mesajdır (sayfaya yapışır, şekerleme gibi yapışmaz) bir mesaj kutusudur. Bir kullanıcı onların kaybolmasını istiyorsa, o zaman açılır pencereyi kapatmaları veya etkileşime girmeleri gerekir, ancak sayfanın geri kalanının etkileşimi hala işlevseldir. Bildirimler açılan pencereye bir örnektir.

Pop-up Mesaj Kutusu

Büyüme Bildirimi / Flash Bildirimi

Büyüme bildirimi, ilgili bir sürenin sonunda kendisini yok eden açılır bir penceredir. Bunlar bazen flaş bildirimler olarak da adlandırılır. Kullanıcı büyüme mesajıyla etkileşime girebilir - belki mesaj kutusunu erken bırakabilir veya bildirim içindeki bir düğmeye tıklayabilir - veya yoksaymayı seçebilir ve zamanlayıcı sona erdikten sonra kaybolabilir. Bir pop-up gibi, büyüme bildirimi müşterinin sayfanın geri kalanıyla etkileşime geçmesini sağlar. Buna bir e-posta veya sosyal medya bildirimi verilebilir.

Büyüme Bildirimi

Işık Kutusu / Tiyatro

Bir lightbox veya tiyatro, genellikle bir kullanıcının buna odaklanması için tarayıcıda zaten mevcut olan içeriği genişleten bir mesaj kutusudur. Yaygın bir kullanım durumu, bir resim veya galeride görüntülenen bir dizi resimdir. Bir lightbox veya tiyatro birden fazla içerikle kullanıldığında, bir kullanıcının orijinal sayfaya geri dönmek ve ardından serideki bir sonraki resme tıklamak yerine, lightbox'ın içindeki ilişkili içerikte dolaşabileceği zaman 'kilitli' olduğu kabul edilir. büyütmek için.

Işık Kutusu / Tiyatro

Popover / Kimlik kartında

Küçük bir mesaj kutusundan biri, bir açılır pencere veya bir hovercard yalnızca bir kullanıcı faresini seçili bir alana getirdiğinde ekranda görünür. Bu mesaj kutuları, kullanıcının üzerinde gezdiği düğme veya kap ile ilgili talimatlar veya açıklamalar içerebilir; Ayrıca kullanıcı bir bağlantıyı tıklatırsa mevcut bilgilerin önizlemesini de içerebilirler.

Popover / Kimlik kartında

Kalıcı / İletişim Kutusu

Son olarak, modal veya iletişim kutusu, tarayıcıdaki geçerli içerikten uzaklaşmadan sayfanın daha fazla etkileşimine izin veren bir mesaj kutusudur. Kalıcı bir kutu ekrana kilitlenmez (yani, istemci gerekli bir etkileşime girmeden ondan uzaklaşabilir), ancak tipik olarak kullanıcının odağıdır (kutunun stiline bağlı olarak). Çoğu durumda, kullanıcı modunu çıkarmak istiyorsa, kutuyu sağlanan bir düğme ile kolayca kapatabilir veya modun dışını tıklatabilir. Bir modal örneği, kullanıcının bir form doldurması veya bir arama sorgusu için belirli bilgiler sağlaması gerektiği zamandır, ancak başka bir sayfaya gitmelerini istemezsiniz.

Kalıcı / İletişim Kutusu

Bir Modal Uygulaması

Sayfanıza bir modal oluşturmak ve uygulamak için, işlevsellik için tamamlamanız gereken üç adım vardır:

  1. HTML: modal öğesini oluşturmak için biçimlendirme
  2. CSS: modunuzun nasıl göründüğünü ve sayfada göründüğünü belirleyen stil
  3. Javascript: olay dinleyicilerini yerleştirmek, böylece kullanıcı etkileşimliğinize bağlı olarak modal görünür / kaybolur

HTML

En basit modeller için, kullanıcının modunu, gerçek modunu etkinleştirmek için tıklayabileceği bir düğmeye (ya da hangi sayfa öğesini seçerseniz) ve modun içinde bir kapatma düğmesi uygulamak isteyebilirsiniz.

Yukarıda, HTML’nizde görünecek bir düğmenin yanı sıra üç CSS sınıfına sahip bir modelin (modal, modal-btn ve close-btn) olduğunu görebilirsiniz. Bunların her biri aşağıdaki CSS'ye dahil edilecektir. İlk div, bütün modal sınıfı bir modal sınıfını içeren ana konteynırdır. Dahili olarak, modalın içeriğini içeren bir div'miz var: Modal'ı açıklıkta kapatma düğmesi ve bir etiket içindeki metni.

Hızlıca bir kenara bırakarak, HTML'de daha fazla divs ve stil oluşturma amacıyla daha fazla CSS sınıfları oluşturarak modalınıza üstbilgileri ve altbilgileri de uygulayabilirsiniz. Örneğin:

CSS

Basit modumuzun HTML'sindeki öğelerin her birini stillendirmek için, ilişkili CSS sınıflarını oluşturmamız gerekir: .modal, .modal-content ve .close-btn. Ayrıca, modal için animasyon oluşturmak üzere CSS'nin de dahil olduğunu aşağıda görebilirsiniz.

.modal {
  görüntü yok;
  pozisyon: sabit;
  dolgu üst: 50px;
  solda: 0;
  üst: 0;
  genişlik:% 100;
  yükseklik:% 100;
  arkaplan rengi: rgb (0, 0, 0);
  arkaplan rengi: rgba (0, 0, 0, 0.5);
}
.modal içeriği {
  pozisyon: göreceli;
  arka plan rengi: beyaz;
  dolgu maddesi: 20px;
  marj: otomatik;
  genişlik:% 75;
  -webkit-animation-name: animatetop;
  -webkit-animasyon süresi: 0.4s;
  animasyon adı: animatetop;
  animasyon süresi: 0,4 sn
}
.close-btn {
  Sağa çık;
  renk: açık tonlu;
  yazı tipi boyutu: 24 piksel;
  yazı tipi ağırlığı: kalın;
}
.close-btn: vurgulu {
  renk: koyu renkli;
}
@ -webkit-keyframes animatetop {
  {top: -300px; opaklık: 0}
  {top: 0; opaklık: 1}
}
@keyframes animatetop {
  {top: -300px; opaklık: 0}
  {top: 0; opaklık: 1}
}

Yukarıdaki sınıflarda, HTML'imizde yarattığımız her bir öğe için stil oluşturuyoruz.

.Modal sınıfının kendisi, sayfayı modalın arkasındaki sayfaya nasıl davranacağını belirleyen niteliklere sahiptir: iletişim kutusunun arkasındaki sayfaya kıyasla genişlik ve yükseklik, renk (bu örnek yarı opak gri kullanır) ve görünürlük ayarı Bir kullanıcı düğmesine tıkladığında onu Javascript'te değiştirebiliriz.

Gerçek iletişim kutusu için .modal içeriğinde ayrı bir stil de var: onu arka plan stiline karşı konumlandırma, iletişim kutusunun kendisi için bir arka plan rengi, dolgu ve bu örnekte, modalin düşeceği şekilde animasyon Sayfanın üst

Dahası, bir ‘x’ yi sağa kayan bir .close-btn sınıfı tasarladık ve kullanıcı kapat düğmesinin üzerine geldiğinde .close-btn: hover ile renk değişecektir. Netlik açısından, kullanıcı iletişim kutusunu kapatmak için tıklayın. Javascript'teki her iki seçenek için bir olay dinleyicisi oluşturacağız.

Bu, kendi başınıza uygulayabileceğiniz CSS'nin yüzeyini zar zor çizer. Kendi gereksinimlerinize en uygun şekilde yukarıdaki kodu ayarlamaktan çekinmeyin.

JavaScript

Son olarak, modelin işlevselliğini yaratabilmek için biraz Javascript yazmamız gerekiyor.

izin modalBtn = document.getElementById ("modal-btn")
let modal = document.querySelector (". modal")
closeBtn = document.querySelector (". close-btn") olsun
modalBtn.onclick = function () {
  modal.style.display = "block"
}
closeBtn.onclick = function () {
  modal.style.display = "none"
}
window.onclick = function (e) {
  if (e.target == modal) {
    modal.style.display = "none"
  }
}

HTML kodumuzdan birkaç nesne seçtik ve bunları değişkenlere atadık: modal-btn, modalın kendisi ve close-btn. Ardından, açık etkinlikler için etkinlik dinleyicileri oluşturduk. Bir kullanıcı modal-btn üzerine tıkladığında, görüntüleme stili "blok" olarak ayarlanır, ancak modalın dışındaki btn veya pencereyi tıklattığında (stilimizde yarı-opak gri olarak gösterilir), Bundan sonra ekran stili "none" olarak ayarlanmış olur. Bu, modal-btn üzerine tekrar tıklayana kadar modal'ı etkin bir şekilde gizler.

Ekrana Basılmış Modal

Genel olarak, DOM ile Javascript ile oynamak inanılmaz eğlenceli ve başlangıç ​​kodlayıcı olarak ödüllendirici oldu. Umarım yukarıdaki kod, modacıları ve mesaj kutularını da kendi başınıza uygulamanıza yardımcı olacaktır. Bazı hızlı Googling'lerle, kullanım durumlarınız için modacıları ve iletişim kutularını ayarlamak için başka kaynaklar da bulabilirsiniz.

Orada iyi şanslar ve mutlu kodlama!

kaynaklar

Yığın Değişimi: Yardımcı Fiiller, Popuplar, Popoverler ve Işık Kutuları

w3schools: Nasıl Yapılır - CSS / JS Modal

Sabe: CSS ve JavaScript ile Kalıcı Açılır Kutu Nasıl Oluşturulur