Html açık kalıcı pencere. HTML5 ve CSS3 ile modal nasıl oluşturulur

Sitede çağrılacak farklı işlevlerin altına koyabileceğiniz, tamamen saf CSS'de yürütülen, işlevler açısından basit bir modal pencere. Bu muhtemelen prostat ayarları açısından değil, aynı zamanda kurulum için modal pencere seçiminden tanıştığım birçok kişiden biridir. Ancak asıl şey, diğerlerinden daha düşük olmayacak olan işlevselliğidir. Ayrıca, varsayılan olarak, sağ üst köşeye bir düğmenin çapraz şeklinde takıldığı hafif bir gölgede yapılır.

Hangi devre dışı bırakma işlevine gidecek veya sadece çerçeveyi ortadan kaldırmak için, bu küçük öğede bile renk paletini değiştirmenin bir etkisi var. Artık web yöneticisi bunu siteye koyabilir ve içine istatistikler veya bilgilendiriciler gibi farklı kategorileri görüntüleyebilen bir açıklama veya operatörler yerleştirebilir.

Ancak gerçek şu ki, kaynağın karanlık bir stiline sahipseniz, stilde ölçeği hızlı bir şekilde değiştirebilir veya daha doğrusu orijinal tasarıma göre ayarlayabilirsiniz. Bir HTML bağlantısına sahip bir bağlantının altında düğme tıklandığında tetiklenecek bir modda saf CSS yapmak için standart yöntemlerden biri burada. Düğmenin kendisi, stillerde, bir sınıfın kaldırılmasının ve adın kalacağı, navigasyona veya ana işlevselliğin veya site navigasyonunun bulunduğu kontrol paneline yerleştirilebilecek görünürlük için daha fazla gider.

Bu, her şeyin yolunda gittiğini kontrol ederken:

Kuruluma başlarken:

Bir düğme ile pencere

CSS

Butksaton-satokavate (
ekran: satır içi blok;
metin-dekorasyon: yok;
sağ kenar boşluğu: 7px;
sınır yarıçapı: 5 piksel;
dolgu: 7px 9px;
arka plan: # 199a36;
renk: #fbf7f7!önemli;
}

anelümen (
ekran: esnek;
pozisyon: sabit;
sol: 0;
en iyi 100%;
genişlik: %100;
yükseklik: %100;
hizalama öğeleri: merkez;
haklı içerik: merkez;
opaklık: 0;
-webkit-geçiş: ilk 0s .7s, opaklık .7s 0s;
geçiş: ilk 0s .7s, opaklık .7s 0s;
}

Anelümen: hedef (
üst: 0;
opaklık: 1;
-webkit-geçiş: yok;
geçiş: yok;
}

Anelümen figürü (
genişlik: %100;
maksimum genişlik: 530 piksel;
pozisyon: göreceli;
dolgu: 1.8em;
opaklık: 0;
arka plan rengi: beyaz;
-webkit-geçiş: opaklık .7s;
geçiş: opaklık .7s;
}

Anelumen.lowingnuska figürü (
arka plan: # f9f5f5;
sınır yarıçapı: 7 piksel;
üst dolgu: 8px;
sınır: 3px düz #aaaabad;
}

Anelumen.lowingnuska şekil h2 (
üst kenar boşluğu: 0;
alt dolgu: 3 piksel;
sınır-alt: 1 piksel katı # dcd7d7;
}

Anelümen: hedef rakam (
opaklık: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
metin-dekorasyon: yok;
pozisyon: mutlak;
sağ: 8 piksel;
üst: 0 piksel;
yazı tipi boyutu: 41 piksel;
}

Anelumen .nedismiseg (
sol: 0;
üst: 0;
genişlik: %100;
yükseklik: %100;
pozisyon: sabit;
arka plan rengi: rgba (10, 10, 10, 0.87);
içerik: "";
imleç: varsayılan;
görünürlük: gizli;
-webkit-geçiş: tüm .7'ler;
geçiş: tüm .7'ler;
}

Anelumen: hedef .nedismiseg (
görünürlük: görünür;
}

Ayrıca, CSS stilinin ve sözde sınıfın, birçok ilginç potansiyel uygulamaya sahip CSS özellikleri tarafından tam olarak kullanılmayanlardan biri olduğunun da farkında olmalısınız.

Sayfanın URL'si, öğesinin tanımlayıcısıyla eşleştiğinde tetiklenir veya farklı bir şekilde koyabilirsiniz, bu, kullanıcının sayfadaki belirli bir öğeye atlamasıdır.

Bu eğitimde, HTML5 ve CSS3 kullanarak kalıcı bir pencerenin nasıl oluşturulacağını öğreneceğiz. Bu eğitimde JS kullanmayacağız, sadece tamamen CSS3. Modal'lar geri bildirim formları, fotoğraflar ve videolar için kullanılabilir ve bunu kullanmanın daha birçok yolu vardır.

Modal penceremizi oluşturmaya başlayalım.

1. Adım. HTML işaretlemesi

Yapmamız gereken ilk şey HTML işaretlemesidir, yani. pencerenin açılacağı bir bağlantı yapın ve penceremizin bir iskeletini yapın. Bunu yapmak için aşağıdaki kodu yazın:

Adım 2. Kalıcı pencerenin içeriği

Şimdi penceremizin içeriğini kendimize ekleyelim. Bir başlık ve biraz metin yapalım ve hepsini bir etikete koyalım

Stilleri ayarlama

Artık bir div'e sarılmış bir köprümüz var. Daha pratik hale getirmek için kabı şekillendirmeye başlayabilirsiniz. İlk olarak, bir CSS modal penceresi için modal bir sınıf oluşturalım. Bunun için: Before sözde öğesini kullanırız:

Modal: önce (içerik: ""; görüntü: yok; arka plan: rgba (0, 0, 0, 0.6); konum: sabit; üst: 0; sol: 0; sağ: 0; alt: 0; z-endeksi: 10;) .modal: hedef: önce (ekran: blok;)

Biz kalıcı bir pencere oluştur bunun için sabit bir konum ayarlayarak. Kullanıcı sayfayı aşağı kaydırdıkça aşağı hareket edecektir.

Ek olarak, koyu arka planın tüm ekranı kaplaması için üst, sağ, alt ve sol kenarları sıfıra ayarladık. Şimdi .modal-dialog için arka planı, sınırı, yarıçapı ve ayrıca sabit bir konumu ayarlamamız gerekiyor. CSS kodumuz şöyle görünecek:

Modal iletişim kutusu (arka plan: #fefefe; kenarlık: # 333 katı 1 piksel; kenarlık yarıçapı: 5 piksel; sol kenar boşluğu: -200 piksel; konum: sabit; sol: %50; üst: -%100; z-endeksi: 11; genişlik: 360px; -webkit-transform: translate (0, -500%); -ms-transform: translate (0, -500%); transform: translate (0, -500%); -webkit-transition: -webkit -dönüştürme 0,3 sn kolaylaşma; -moz-geçiş: -moz-dönüştürme 0,3 sn hareket kolaylığı; -o-geçiş: -o-dönüşüm 0,3 sn serbest bırakma; geçiş: 0,3 sn dönüştürme;)

Modal: hedef .modal-dialog (-webkit-transform: translate (0, 0); -ms-transform: translate (0, 0); transform: translate (0, 0); üst: %20;)

Modalın güzel görünmesini sağlamak için kullanabileceğiniz birkaç stil daha:

gövde (renk: # 333; yazı tipi ailesi: "Helvetica", arial; yükseklik: 80em;) .wrap (dolgu: 40 piksel; metin hizalama: merkez;) hr (açık: her ikisi; kenar boşluğu: 40 piksel; kenar boşluğu- alt: 40 piksel; kenarlık: 0; kenarlık üst: 1 piksel katı #aaa;) h1 (yazı tipi boyutu: 30 piksel; kenar boşluğu: 40 piksel;) p (alt kenar boşluğu: 20 piksel;) .modal-gövde (dolgu: 20 piksel ;) .modal-header, .modal-footer (dolgu: 10px 20px;) .modal-header (border-bottom: #eee solid 1px;) .modal-header h2 (font-size: 20px;) .modal-footer (kenarlık üstü: #eee düz 1 piksel; metin hizalama: sağa;)

Artık HTML kipini şekillendirip işlevsel hale getirdiğimize göre, tek yapmamız gereken sağ altta bir buton oluşturmak. CSS kodu:

Btn (arka plan: # 428bca; kenarlık: # 357ebd katı 1 piksel; kenarlık yarıçapı: 3 piksel; renk: #fff; görüntü: satır içi blok; yazı tipi boyutu: 14 piksel; dolgu: 8 piksel 15 piksel; metin süsleme: yok; metin- hizalama: merkez; minimum genişlik: 60 piksel; konum: göreceli; geçiş: renk .1s hareket hızı; / * üst: 40em; * /) .btn: üzerine gelin (arka plan: # 357ebd;) .btn.btn-big (font- boyut: 18 piksel; dolgu: 15 piksel 20 piksel; minimum genişlik: 100 piksel;) .btn-close (renk: #aaa; yazı tipi boyutu: 30 piksel; metin dekorasyonu: yok; konum: mutlak; sağ: 5 piksel; üst: 0; ) .btn-close: üzerine gelin (renk: # 919191;) / * yukarı kaydırmayı durdurmak için ekleyin * / #close (ekran: yok;)

Oluşturulan kalıcı pencerenin avantajları nelerdir?

Modumuzun ana avantajı, yalnızca HTML5 ve CSS3 kullanılarak oluşturulmuş olmasıdır. Neden bu kadar önemli? Javascript kalıcı penceresi Yeni başlayan birinin bile oluşturabileceği bir şey. İnternette indirilebilecek birçok hazır çözüm var. Peki neden JavaScript olmadan sadece HTML5 ve CSS3 yapmak isteyelim ki?

Örneğin, JavaScript desteği olmayan kullanıcılar kalıcı bir pencere kullanabilirler. İstatistikler, dünya çapındaki kullanıcıların %2'sinden fazlasının JavaScript kullanmadığını gösteriyor.

Animasyonu oluşturmak için birkaç satır CSS kullandık. herhangi birini uygularsanız JavaScript kitaplığı animasyonlar, ne kadar az kod kullandığımıza şaşıracaksınız. Bunun başka bir avantajı daha var - daha temiz kod.

Tüm animasyonu içeren bir div uyguladık ve sadece birkaç satır koddan oluşuyor. Bu, kodu daha temiz hale getirir ve bu çözüm, JavaScript'teki kod değişiklikleri hakkında endişelenmeden bu div'i uygun gördüğünüz şekilde değiştirmenize veya taşımanıza olanak tanır.

Son olarak, HTML5 ve CSS3 gelecek. Hepimiz bunları projelerimizde kullanmaya çalışıyoruz. Onlar sayesinde daha temiz kod elde edersiniz, JavaScript kitaplıkları için endişelenmenize gerek kalmaz. HTML5 ve CSS3 uzun süredir bizimle, yani kullanmamak için hiçbir neden yok.

Çözüm

Artık, giriş veya kayıt formları, reklam birimleri ve daha fazlası için kullanılabilecek HTML5 ve CSS3 kullanarak basit bir model oluşturabilirsiniz. Ayrıca JavaScript yerine neden HTML5 ve CSS3 kullanmanız gerektiğini öğrendiniz ve sitelerin modları nasıl kullandığına dair bazı örnekler gördünüz.

Makalenin çevirisi " Javascript Olmadan CSS Modal Penceresi Nasıl Yapılır? Güleryüzlü proje ekibi tarafından hazırlanmıştır.

Herkese merhaba! Bu kısa eğitimde, saf CSS'de basit ama güçlü bir modal oluşturacağız. Ve aynı zamanda flexbox gibi faydalı bir şeyi (ve kime açacağımızı) tekrarlayacağız. Bu durumda, sadece tıklandığında açılan, aynı zamanda tam olarak ekranın ortasına yerleştirilmiş kalıcı bir pencere oluşturacağız. Bir zamanlar bu sadece javascript kullanılarak yapılabiliyordu, ancak zaman geçiyor ve şimdi bu tam anlamıyla 4 satır kod ile yapılabilir.

Kalıcı pencereyi aç

Tüm bu modal pencere, olduğu gibi, iki katmandan oluşur - bir sınıfa sahip ilk katman ModalPencere, kipin etrafındaki tüm alanı karartır ve pencerenin içeriğini ekranın ortasına hizalar. İkinci katman - sınıf Modal_Body- doğrudan kalıcı pencerenin içeriğini içerir.

Şimdi bu işaretleme için CSS'yi oluşturalım:

Modal (konum: sabit; görüntü: yok; üst: 0; sağ: 0; alt: 0; sol: 0; z-endeksi: 0; arka plan: rgba (0,0,0,0.7); işaretçi olayları: yok ;) .Modal: hedef (ekran: esnek; işaretçi-olaylar: otomatik;) .Modal_Body (konum: göreli; z-endeksi: 2; görüntü: blok; kenar boşluğu: otomatik; dolgu: 15 piksel; arka plan: #FFF;). ModalFull (konum: mutlak; görüntü: blok; z-endeksi: 0; genişlik: %100; yükseklik: %100;)

Modal pencerenin çalışmasına bir göz atalım ve nasıl çalıştığını anlayalım.

Gördüğümüz gibi, "Kipli pencereyi aç"a tıkladığınızda, tüm pencere gölgelenir ve tam ortada beyaz bir kalıcı pencere belirir. Şimdilik bunun üzerinde duralım ve kendimizi teoriye adayalım.

Javascript kullanmamayı kabul ettiğimiz ve onu öğeler üzerindeki tıklamaları izlemek için kullanamadığımız için, bunu bir css sözde sınıfı ve bir karma (belirli bir sayfadaki bir öğeye işaret etmek için) bir bağlantı bağlantısı kullanarak kolayca yapabiliriz ve İD mutlaka bağlantıdaki işaretçiye eşit bir değere sahip. Örneğimize bir göz atın: href bağlantılar ve İD kalıcı pencerenin ana kabı aynı anlama sahiptir - ModalPencere... Bu önemlidir çünkü tarayıcının hangi öğelerin birbiriyle etkileşime gireceğini anlaması gerekir.

Bizim durumumuzda, kalıcı pencerenin genel kabı gizlidir ve buna göre kalıcı pencerenin tüm içeriği gizlidir. Ancak bağlantıya tıklandığında, öğe sözde sınıfı alır. : hedef ve buna göre görünür. css koduna bakın - özellik Görüntüle değişiklikler Yoküzerinde esnek... Esnek olduğuna dikkat edin, çünkü onunla hizalayabiliriz Modal_Body tam olarak ekranın ortasında. Bunun için diğer tüm stilleri bir kerede atadık.

Bu arada, ekranın tüm yüzeyi boyunca nasıl bu kadar düzleştiğini tam olarak anlamadıysanız, size söylüyorum - her şey aşağıdaki 4 satırda:

Üst: 0; sağ: 0; alt: 0; sol: 0;

Aynı anda sağda, solda, üstte ve altta sıfır pikselde olması gerektiğini belirtmiştik. Bunun yerine, örneğin aşağıdaki yapıyı kullanabilirsiniz:

Genişlik: %100; yükseklik: 100vh;

Burada ekranın %100'üne eşit genişliği belirtiyoruz, ancak yüksekliği kullanarak ayarlamak daha iyidir. görüntü alanı yüksekliği- tarayıcı penceresinin yüksekliği. Sürüme odaklanacağım.

Bir diğer önemli nüans, z-endeksi özelliğinin değeridir. kalıcı ve Modal_Body... Zorunlu olmalılar ve Modal_Body değer olarak en az bir birim daha büyük olmalıdır, aksi takdirde kipin içeriği kullanılamaz - bağlantılara ve düğmelere tıklamak imkansız olacaktır. Ve kaydırma ile içerik olacaksa, o zaman bu da çalışmayacaktır, çünkü bir eleman diğeriyle örtüşecektir.

Başyapıtımızı yaratmaya devam edelim. Basıldığında, kalıcı pencere görünür, ancak onu öylece kapatamayız. Kapatmak için bir buton ekleyelim:

Aslında iptal ediyor : hedef bizim modal penceremiz için ve sonra sadece ilk pozisyonunu alır - gözden uzaktır. Ancak bu bağlantıda bazı incelikler var - tıkladığınızda tarayıcı böyle bir öğe bulmaya çalışacak, ancak başarısız olacak ve sayfayı en başa kaydıracak. Bu davranış, bu yaklaşımın mod oluşturma konusundaki küçük dezavantajlarından biridir, ancak ele alınabilir.

Bunun için öznitelik href değiştirdiğimiz bağlantıda «#» üzerinde "#ModalPenceresiKapat" ve pencereyi açan bağlantı düğmesi için özniteliği ekleyin İD aynı değerle. niteliğini de kullanabilirsiniz. isim, ancak HTML5'te bir çapa tanımlamak daha iyidir ve bir nitelik belirtmeniz gerekir İD.

Kalıcı pencereyi aç

Şimdi, tıklandığında tarayıcı düğmeye geri dönecektir. Gerçeği söylemek gerekirse, bu çapanın ekranın üst kenarında yer alacağını söylemek istiyorum. Ancak bu açma butonu üstbilgi'e veya altbilgi'e yerleştirildiyse, bu sorun giderilir. Ve başlığın sabit bir konumu varsa, genel olarak iyi olacaktır - örneğin, bir geri arama siparişi vermek veya ön sipariş / danışmanlık için, pencere kapatıldığında gayet iyi çalışacaktır.

İşte elimizdekilere bir örnek:

Konteyneri biraz daha değiştirebilirsiniz Modal_Body- bunlar boyut kısıtlamalarıdır (böylece yükseklik ve genişlikte genişlemez). Ve bir küçük nüans daha - Kodu, mümkünse, kapanış etiketinden önce kalıcı bir pencereyle yerleştirmenizi öneririm

.

Bu şekilde hızlı bir şekilde kalıcı bir pencere oluşturabilirsiniz. Yazmış olduğumuz bu kod, ihtiyaç duyuldukça gerekli stiller eklenerek temel haliyle kullanılabilir.

Umarım öğreticim sizin için yararlı olmuştur. Size iyi günler ve Web Adalarında tekrar görüşmek üzere!

Kipler, web yöneticisinin cephaneliğinde yaygın olarak kullanılan bir araçtır. Kayıt formlarını, reklam birimlerini, mesajları vb. görüntüleme gibi çok sayıda görevi çözmek için çok uygundur.

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 yerleştirelim. Örneğimiz için tam işaretleme şöyle görünür:

Kalıcı pencereyi aç

Stiller

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

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 pencere açıkken sayfayı kaydırırsanız aşağı inecektir. 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 bir 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ü şekillendiriyoruz:

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

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