HTML5 ve CSS3'te kalıcı bir pencere oluşturuyoruz. Bir jQuery açılır penceresi nasıl oluşturulur

3. Referans ile çağrılan bir jQuery modal penceresi örneği (Demo ile)

Büyük olasılıkla, İnternet'te bir kereden fazla açılır mod penceresi gördünüz - kayıt onayı, uyarı, yardım bilgileri, dosya indirme ve çok daha fazlası. Bu derste, en temel modal pencerelerin nasıl oluşturulacağına dair bazı örnekler sunacağım.

Basit bir açılır pencere modeli nasıl oluşturulur

Hemen karşınıza çıkacak olan en basit modal pencerenin kodunu incelemeye başlayalım.
jQuery kodu

Kodu herhangi bir yere yapıştırın vücut Senin sayfan. Sayfayı yükledikten hemen sonra, herhangi bir komut olmadan şuna benzeyen bir pencere göreceksiniz:

Ancak aşağıdaki kod, sayfanın tamamı tarayıcıya yüklendikten sonra yürütülecektir. Örneğimizde, resimler içeren sayfayı yükledikten sonra basit bir açılır pencere açılacaktır:

CSS ile referans olarak jQuery modal penceresini çağırma

Bir sonraki adım oluşturmaktır kalıcı pencere linke tıkladığınızda. Arka plan yavaş yavaş kararacaktır.

Giriş ve kayıt formlarının bu tür pencerelerde bulunduğunu sık sık görebilirsiniz. hadi işimize bakalım

Önce yazalım html bölümü... Bu kodu belgenizin gövdesine yerleştiriyoruz.

Kalıcı bir pencere çağırma

CSS kodu... Ya ayrı bir css dosyasında ya da
jQuery kodunda, kip ve maskenin konumuna odaklanacağız, bu durumda yavaş yavaş arka planı karartacağız.

Dikkat! Kitaplığı belgenin başına eklemeyi unutmayın!

Kütüphaneyi Google web sitesinden bağlama. Peki, jQuery kodunun kendisi.

JQuery Kodu

kalıcı pencereler web yöneticisinin cephaneliğinde sıkça kullanılan bir araçtır. O çözmek için çok uygundur Büyük bir sayı kayıt formlarını, reklam birimlerini, mesajları vb. görüntüleme gibi görevler.

Ancak, projenin bilgi desteğinde önemli bir yere sahip olmasına rağmen, modals genellikle JavaScript'te uygulanır, bu da işlevselliği genişletirken veya geriye dönük uyumluluk sağlarken sorun yaratabilir.

HTML5 ve CSS3, olağanüstü kolaylıkla modal oluşturmanıza olanak tanır.

HTML işaretlemesi

Modal oluşturmaya yönelik ilk adım basit ve etkili işaretlemedir:

Kalıcı pencereyi aç

Bir div öğesinin içinde kipin içeriği yerleştirilir. Ayrıca pencereyi kapatmak için bir bağlantı düzenlemeniz gerekir. Örneğin, basit bir başlık ve birkaç paragraf yayınlayalım. Örneğimiz için tam işaretleme şöyle görünür:

Kalıcı pencereyi aç

Stiller

sınıf oluştur modalDialog ve şekillenmeye başlıyoruz dış görünüş:

ModalDialog (konum: sabit; yazı tipi ailesi: Arial, Helvetica, sans-serif; üst: 0; sağ: 0; alt: 0; sol: 0; arka plan: rgba (0,0,0,0.8); z-endeksi : 99999; -webkit-geçişi: opaklık 400ms kolaylaşma; -moz-geçişi: opaklık 400ms kolaylaşma; geçiş: opaklık 400ms kolaylaşma; görüntüleme: yok; işaretçi-olayları: yok;)

Penceremiz sabit bir konuma sahip olacak, yani sayfayı kaydırdığınızda aşağı doğru hareket edecektir. açık pencere... Ayrıca, siyah arka planımız tüm ekranı kaplayacak şekilde genişleyecektir.

Arka plan hafif bir şeffaflığa sahip olacak ve ayrıca özellik kullanılarak diğer tüm öğelerin üzerine yerleştirilecektir. z-endeksi.

Son olarak, modal penceremizi görüntülemek ve inaktif durumda gizlemek için geçişleri ayarladık.

Belki mülkü bilmiyorsun işaretçi olayları, ancak öğelerin fare tıklamasına nasıl tepki vereceğini kontrol etmenizi sağlar. Değeri sınıf için değerine ayarladık modalDialog, çünkü sözde sınıf etkinken bağlantı fare tıklamalarına yanıt vermemelidir. ": Hedef".

Şimdi sözde sınıfı ekliyoruz : hedef ve kalıcı pencere için stiller.

ModalDialog: hedef (görüntüleme: blok; işaretçi olayları: otomatik;). ModalDialog> div (genişlik: 400 piksel; konum: göreli; kenar boşluğu: %10 otomatik; dolgu: 5 piksel 20 piksel 13 piksel 20 piksel; kenarlık yarıçapı: 10 piksel; arka plan: # arka plan: -moz-doğrusal-gradyan (#fff, # 999); arka plan: -webkit-doğrusal-gradyan (#fff, # 999); arka plan: -o-doğrusal-gradyan (#fff, # 999); )

sözde sınıf hedef elemanın görüntüleme modunu değiştirir, bu nedenle bağlantı tıklandığında modulumuz görüntülenecektir. Ayrıca mülkün değerini de değiştiririz işaretçi olayları.

Modun genişliğini ve sayfadaki konumunu tanımlarız. Ayrıca arka plan ve yuvarlatılmış köşeler için bir degrade tanımlayın.

Pencereyi kapat

Şimdi pencereyi kapatma işlevini uygulamamız gerekiyor. Düğmenin görünümünü oluşturuyoruz:

Kapat (arka plan: # 606061; renk: #FFFFFF; satır yüksekliği: 25 piksel; konum: mutlak; sağ: -12 piksel; metin hizalama: merkez; üst: -10 piksel; genişlik: 24 piksel; metin süsleme: yok; yazı tipi- ağırlık: kalın; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; kutu gölgesi: 1px 1px 3px # 000;) .close: üzerine gelin (arka plan: # 00d9ff;)

Düğmemiz için arka plan ve metin konumunu ayarlıyoruz. Ardından butonu konumlandırıp çerçevenin yuvarlama özelliği ile yuvarlak hale getiriyoruz ve ince bir gölge oluşturuyoruz. Fare imlecini düğmenin üzerine getirdiğinizde arka plan rengini değiştireceğiz.

Kalıcı pencere, önemli bir şey söylemek için açılan küçük bir penceredir. Bootstrap olmadan modal yapmak zor mu? Anlamaya çalışalım.

DOM'a nereye eklenir?

Genellikle, kapanış gövde etiketinin önüne koyarım.

Çoğunlukla stiller yüzünden. Tüm gövdeyi saran bir katmanla uğraşırken, CSS'de bir kipi konumlandırmak, potansiyel olarak kendi konumlandırmalarına sahip olabilecek bilinmeyen bir ana öğe kümesiyle olduğundan çok daha kolaydır.

merkezleme

Yüksekliği ve genişliği bilmeden hem dikey hem de yatay olarak merkezleyebileceğiniz en sevdiğim hilelerden biri.

Modal (konum: sabit; üst: %50; sol: %50; dönüştürme: çevir (-50%, -50%);)

Bu çok kullanışlıdır çünkü açık bir modal genişliğine bakılmaksızın genellikle tam merkezde olmalıdır. İçerideki içeriğe bağlı olduğu için yüksekliğin değişmesi daha olasıdır.

Konum - sabit mi?

Konumu kullandığımıza dikkat edin: sabit; böylece açık mod her zaman ortadayken kullanıcılar aşağı kaydırabilir. Genel olarak, sabit değerin halihazırda güvenli bir şekilde kullanılabileceğine inanıyorum. mobil cihazlar... Ancak, daha eski telefonları barındırmanız gerekiyorsa, mutlak ile değiştirmeyi deneyin.

genişliğini bulalım

Büyük ekranlarda, tipik bir açık modal yalnızca ortalanmakla kalmaz, aynı zamanda genişlik olarak da sınırlıdır.

Kalıcı (genişlik: 600 piksel;)

Ancak, 600 pikselden daha küçük ekranlar var. Durumu düzeltmek için maksimum genişlik ekleyelim.

Modal (genişlik: 600 piksel; maksimum genişlik: %100;)

Boy uzunluğu

Yüksek bir bina ayarlamak daha da sorumlu bir iştir. İçeriğin değişme eğiliminde olduğunu biliyoruz. Ayrıca, dönüştürme yoluyla merkezleme tekniği, kaydırma çubuğu görünmeden kenarları mutlu bir şekilde kırpar. Maksimum yüksekliği ayarlamak bizi ikinci kez güvence altına alacak.

Modal (yükseklik: 400 piksel; maksimum yükseklik: %100;)

taşma

Yüksekliği bulduktan sonra, taşma özelliğini ele almanın zamanı geldi. Taşma değerini doğrudan .modal içinde kullanmak yaygındır, ancak bununla ilgili iki sorun vardır:

• Kaydırılmaması gereken öğeleri kullanmak isteyebiliriz.
• Taşma, kullanacağımız gölgeyi kırpacaktır.

Bir iç kap kullanmanızı öneririm:

Kaydırılacak içeriğimiz olacağı göz önüne alındığında, yüksekliği ayarlamamız gerekiyor. Birkaç seçenek var. İşte onlardan biri:

Modal değerler (konum: mutlak; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; / * dolgu * / dolgu: 20px 50px 20px 20px; / * kaydırmaya izin ver * / taşma: otomatik;)

Düğmeler

Modal kullanma fikri, herhangi bir şey yapılmadan önce bir eylemi yapmaya zorlamak. Pencereyi kapat düğmesini herhangi bir durumda görünür kılmak kötü bir fikir gibi görünmüyor.

Karartma ile başa çıkmak

Tamamen kararan bir arka plana sahip normal bir kalıcı pencere yapılır. Bu, birkaç nedenden dolayı yararlıdır:

• ekranın geri kalanını karartabilir
• modal çevresindeki içerikle tıklamaları/etkileşimleri önleyebilir
• dev bir kapatma düğmesi olarak kullanılabilir

Tipik kullanım durumu:

.modal (/ * yukarıda tanımladığımız her şey * / z-endeksi: 1010;) .modal-overlay (z-endeksi: 1000; konum: sabit; üst: 0; sol: 0; genişlik: %100; yükseklik: 100%; )

Sınıfla kapat, sınıfla aç değil

Varsayılanın olduğu yaygın bir olay fark ettim .modal sınıf örneğin gibi gizlidir görüntü yok; Ardından, açmak için sınıfı ekleyin .modal.open (görüntüleme: blok;)

Ancak, bu kötü olabilir, çünkü modunuz ekran: esnek; ve Ekran bloğu; yeniden yazacak.

Modal (.display: flex;) .modal.closed (ekran: yok;)

JavaScript ekle

var modal = document.querySelector ("# modal"), modalOverlay = document.querySelector ("# modal-overlay"), closeButton = document.querySelector ("# close-button"), openButton = document.querySelector ("# open -düğme "); closeButton.addEventListner ("tıklama", işlev () (modal.classList.toggle ("kapalı"); modalOverlay.classList.toggle ("kapalı");)); openButton.addEventListner ("tıklama", işlev () (modal.classList.toggle ("kapalı"); modalOverlay.classList.toggle ("kapalı");));

Modallar gibi tedavi edilebilir harika yol ek ekran alanı satın alın, site kullanıcısının dikkatini çekin, ona bir seçenek sunun veya değişiklikler hakkında uyarın. Veya ziyaretçiye normalde dikkat etmeyeceği bilgileri empoze etmenize izin veren kirli bir hack olarak.

Bunlar, site kullanıcısı ile ilişkimizi ölçen çizgideki uç noktalardır. Modallar, alışkanlıklara, kişisel tercihlere ve internette gezinme şekline bağlı olarak kullanıcı için bir nimet veya bir lanet olabilir.

Kipler, kullanıcıyı, içeriği bazen kullanıcının az önce görüntüledikleriyle uyuşmayan sitenin bir bölümünden diğerine hızlı bir şekilde değiştirmeye zorlar.

Kalıcı pencerenin görünümü otomatik olarak gerçekleştiyse veya kullanıcı tarafından açıkça başlatılmadıysa, kafa karıştırıcı ve can sıkıcı olabilir. Bu, modallerin müdahalecilikle ve kullanıcının özel alanına izinsiz girmekle suçlanmasına izin verir.

Görünen o ki kipler, basit ve kolayca görülebilen kontroller içerdikleri sürece kullanıcıya ciddi anlamda müdahale edemezler. Her zaman ekranın köşesindeki "çarpı"ya basabilir, metni gözden geçirebilir veya son olarak bu kayıt formunu doldurabilirsiniz.

Ancak tarayıcınızı bir internet kiosk klavyesi, braille ekranı veya cihazı kullanarak kontrol ettiğinizi hayal edin. ses girişi, ve görünen kalıcı pencere, giriş odağını düğmesine veya alanına taşımadı, ancak site içeriğinin geri kalanında kendi altında bir yerde bıraktı. Bu, siteyi cihazımızda kullanılamaz hale getirecektir.

Ve bu tür vakalar, beklediğinizden daha sık meydana gelir. modern gelişme kullanılabilirlik uygulamaları ve test araçları.

Kodun anlamı siteyi daha erişilebilir hale getirir

Herhangi bir cihazda kullanım kolaylığı ve site erişilebilirliği, modları kullanırken genellikle zarar görür. Modal bir pencerenin kullanım amacı ne olursa olsun, yönetimi basit ve çok yönlü olmalıdır.

Bunu başarmak için, işaretlemenin anlamını dikkatlice düşünmeliyiz. Bu basit bir gereklilik gibi görünüyor, ancak ne yazık ki çoğu zaman karşılanmıyor. Kapat düğmesi olan bir pencere için aşağıdaki kodu hayal edin:

eleman