Html ve css'de basit açılır pencere. CSS Modelleri

1. pencereyi aç 2. pencereyi aç 3. pencerede video 4. pencerede fotoğraf

Yukarıdaki kod örneğinde, anlaşılır olması için modal pencerelerin kapsayıcılarına kısa açıklamalar yazdım. Benzetme yoluyla sizin için kalır, div kapsayıcı herhangi bir üçüncü taraf kaynaktan, YouTube, Vimeo, vb. basit metin, resim veya video olsun, herhangi bir içeriğinizi yerleştirin. Modal pencerelerin çağrılarına bağlantılar metin yapılabilir veya bunları örnekte olduğu gibi formda düzenleyebilirsiniz.

Adım 2. CSS

Bir sonraki adım, bu en ilginç olanı, modal penceremiz için gerekli tüm stilleri hazırlamak, görünümü tasarlamak ve işlevsellik eklemek önemlidir. Kafa karıştırmamak için temel sayfa stillerini çıkardım ve anlaşılır olması için bazı yorumlar ekledim:

/ * Temel karartma ve modal katman stilleri * / .overlay (üst: 0; sağ: 0; alt: 0; sol: 0; z-endeksi: 10; ekran: yok; / * karartma arka planı * / arka plan rengi: rgba (0, 0, 0, 0.65); konum: sabit; / * sabit konumlandırma * / imleç: varsayılan; / * imleç türü * /) / * gölgelendirme katmanını etkinleştir * / .overlay: hedef (ekran: blok;) / * mod stilleri * / .popup (üst: -%100; sağ: 0; sol: %50; yazı tipi boyutu: 14 piksel; z-endeksi: 20; kenar boşluğu: 0; genişlik: %85; minimum genişlik: 320 piksel; maksimum genişlik: 600 piksel; / * sabit konumlandırma, kaydırma sırasında pencere sabittir * / konum: sabit; dolgu: 15 piksel; kenarlık: 1 piksel katı # 383838; arka plan: #fefefe; / * köşeleri yuvarlama * / -webkit-border-radius : 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; yazı tipi: 14px / 18px "Tahoma", Arial, sans-serif; / * dış gölge * / -webkit -box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -moz-box-shadow: 0 15px 20px rgba (0,0 , 0, .22), 0 19px 6 0px rgba (0,0,0, .3); -ms-box-shadow: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); kutu gölgesi: 0 15px 20px rgba (0,0,0, .22), 0 19px 60px rgba (0,0,0, .3); -webkit-dönüşüm: çevir (-50%, -500%); -ms-dönüşüm: çevir (-50%, -500%); -o-dönüşüm: çevir (-50%, -500%); dönüştür: çevir (-50%, -500%); -webkit-geçişi: -webkit-dönüşüm 0.6s kolaylığı; -moz-geçişi: -moz-dönüşüm 0,6s kolaylığı; -o-geçiş: -o-dönüşüm 0,6s kolaylaştırma; geçiş: 0,6s hareket kolaylığı dönüşümü; ) / * mod bloğunu etkinleştir * / .overlay: target + .popup (-webkit-transform: translate (-50%, 0); -ms-transform: translate (-50%, 0); -o-transform: translate ( -%50, 0); transform: translate (-50%, 0); üst: %20;) / * kapat düğmesini oluşturur * / .close (üst: -10 piksel; sağ: -10 piksel; genişlik: 20 piksel ; yükseklik: 20 piksel; konum: mutlak; dolgu: 0; kenarlık: 2 piksel katı #ccc; -webkit-border-yarıçapı: 15 piksel; -moz-border-yarıçapı: 15 piksel; -ms-border-radius: 15 piksel; -o- sınır yarıçapı: 15 piksel; sınır yarıçapı: 15 piksel; arka plan rengi: rgba (61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; kutu gölgesi: 0px 0px 10px # 000; metin hizalama: merkez; metin dekorasyonu: yok; yazı tipi: 13 piksel / 20 piksel "Tahoma", Arial, sans-serif; yazı tipi ağırlığı: kalın; -webkit-geçişi : tüm hareket hızları .8s; -moz-geçiş: tüm hareket hızları .8s; -ms-geçiş: tüm hareket hızları .8s; -o-geçiş: tüm hareket hızları .8s; geçiş: tüm hareket hızları .8s;) .close: önce (renkli : rgba ( 255, 255, 255, 0. dokuz); içerik: "X"; metin gölgesi: 0 -1px rgba (0, 0, 0, 0.9); yazı tipi boyutu: 12 piksel; ) .close: üzerine gelin (arka plan rengi: rgba (252, 20, 0, 0.8); -webkit-dönüşüm: döndürme (360 derece); -moz-dönüşüm: döndürme (360 derece); -ms-dönüşümü: döndürme (360 derece) ; -o-dönüşüm: döndürme (360 derece); dönüştürme: döndürme (360 derece);) / * pencere içindeki resimler * / .popup img (genişlik: %100; yükseklik: otomatik;) / * sol / sağ küçük resimler * / . pic -left, .pic-right (genişlik: %25; yükseklik: otomatik;) .pic-left (kayan: sol; kenar boşluğu: 5px 15px 5px 0;) .pic-sağ (kayan: sağ; kenar boşluğu: 5px 0 5px 15px ;) / * m-medya öğeleri, çerçeveler * / .popup yerleştirme, .popup iframe (üst: 0; sağ: 0; alt: 0; sol: 0; ekran: blok; kenar boşluğu: otomatik; minimum genişlik: 320 piksel ; maksimum genişlik: 600 piksel; genişlik: %100;) .popup h2 (/ * başlık 2 * / kenar boşluğu: 0; renk: # 008000; dolgu: 5 piksel 0 piksel 10 piksel; metin hizalama: sol; metin gölgesi: 1 piksel 1 piksel 3px #adadad; yazı tipi ağırlığı: 500; yazı tipi boyutu: 1.4em; yazı tipi ailesi: "Tahoma", Arial, sans-serif; satır yüksekliği: 1.3;) / * paragraflar * / .popup p (kenar boşluğu: 0 ; dolgu: 5 piksel 0)

Gördüğünüz gibi sevgili arkadaşlar, her şey oldukça basit ve gereksiz karmaşa yok. Her şeyi doğru yaparsanız, cephaneliğinizde, metin içeriği, fotoğraflar, çeşitli kayıt ve geri bildirim biçimleri veya herhangi bir üçüncü taraf kaynaktan videolar gibi herhangi bir içeriği yerleştirebileceğiniz harika bir araç kutusu alacaksınız. Parametrelerle deney yapın, pencereyi istediğiniz gibi değiştirin. Mümkünse, en iyi uygulamalarınızı veya aniden ortaya çıkan sorunları yorumlarda paylaşın.

Ya da belki sizin için ilginç olacaktır:

Takviyeler:

Çoğu zaman, hatta çok sık, bir modu kapatırken video oynatmanın nasıl düzgün bir şekilde durdurulacağı sorusu sorulur. pencere. Kalıcı pencere kapatıldığında, demodaki videonun oynatılması durur. Demoda pencere kapat butonu için onclick olayını kullandım, linkte demo sayfasının adresini belirttim yani. video penceresinin bulunduğu sayfa:

Biri basitçe bağlantıyı kullanabilir boş nitelik href = "", her iki durumda da sayfa yeniden yüklenir ve buna bağlı olarak pencere kapanır ve video durur, koltuk değneği elbette hala aynıdır, ancak javascript'i bağlamadan başka bir daha etkili ve geçerli çözüm şu an Sahip değilim.

JavaScript API'sini kullanarak, Chromeless Player'ı ve yerleşik YouTube oynatıcısını aşağıdakilerle kontrol edebilirsiniz: javaScript kullanarak kod. Satır içi videolu mod bloğumuz için yürütülebilir js şu şekilde olacaktır:

id = "stop" olan butona tıkladığınızda, fonksiyon çağrılacak, pencere kapanacak ve videonun oynatılması duracaktır.
Ancak, diğer video hizmetleri için tefli dansların farklı olacağı anlaşılmalıdır))). Her zaman bir seçenek olmasına rağmen - hazır özel eklentileri kullanmaktır.

Rusça konuşulan ülkelerde yaşayan web tasarımcıları ve girişimciler, muhtemelen İngilizce şablonlardan daha fazlasını kullanabilmek isterler. Ayrıca Rusça hazır çözüm koleksiyonlarına da erişmek istiyorlar. Bu nedenle, şu anda TemplateMonster pazarında sunulan en yeni bölüme dikkatinizi çekmek istiyoruz. Şablonların her birinin metninin elle yazıldığını belirtmekte fayda var. Ayrıca, etkileyici bir çevrimiçi proje oluşturmak için herhangi bir doğaüstü kodlama bilgisine sahip olmanız gerekmez.

Tüm saygımla, Andrew

Günümüzde, çeşitli siteler için, her türlü pop-up modal pencere - açılır pencereler - kayıt, yetkilendirme, bilgi pencereleri, - her şekil ve boyutta norm haline gelmiştir. büyük miktar eklentiler artı basit için jQuery ve uygun oluşturma bu tür açılır pencereler - örneğin aynı Shadowbox.

Bu tür açılır pencerelerin görünümü, boyutu ve tasarımı tamamen çeşitlidir - bindirme, gölgeler, animasyonlar ile - sadece sayısız. Onları birleştiren şey, belki de, genellikle sayfanın tam ortasında hem yatay hem de dikey olarak görüntülenmeleridir. Ve merkezleme JS ile yapılır. Bu hesaplamaların detaylarına girmeyeceğim, sadece kısaca anlatacağım:

Popup HTML kodu genellikle aşağıdaki yapıya sahiptir:

ve CSS ( burada ve aşağıda, yalnızca bazı tarayıcılar ve sürümleri için gerekli olan bazı özelliklerin yazılmasını kasıtlı olarak atlayacağım, yalnızca en temel olanı bırakacağım.):

Popup__overlay (
pozisyon: sabit;
sol: 0;
üst: 0;
arka plan: # 000;
opaklık: .5;
filtre: alfa (opaklık = 50);
z-endeksi: 999
}
.açılır (
konum: mutlak;
genişlik: %20;
z-endeksi: 1000;
kenarlık: 1px düz #ccc;
arka plan: #fff
}

JS, tarayıcı ve tarayıcı sürümünü algılar ve buna dayanarak boyutları hesaplar. çalışma alanı ve açılır pencerenin kendisinin boyutları (belirtilmemişlerse) ve ardından sol üst köşesinin konumunun basit hesaplamaları yapılır (.popup için sol ve üst css özellikleri). Pek çok eklenti, sayfanın yeniden boyutlandırılmasına da tepki vererek, açılır pencerenin tam olarak çalışma alanının ortasına yerleştirilmesi için her şeyi her seferinde yeniden hesaplar.

Ben doğası gereği mükemmeliyetçiyim (biliyorum, bazen kötüdür) ve çoğu zaman küçük ayrıntılarla bile uğraşırım, bu ayrıntıları geliştirmeye ve bu ayrıntılara mümkün olan en fazla genişletilebilirliği eklemeye çalışırım ve şu an kendimi tutamamaktan kendimi alamadım. tüm bu eklentilerin işi. Açılır pencereyi konumlandırma konusundaki tüm çalışmaların JS'nin omuzlarından tarayıcının omuzlarına kaydırılabileceği, yani bu işin CSS kullanılarak yapılabileceği düşüncesi ortaya çıktı.

Yapacağımız şey bu.

Aşağıda, büyük tarayıcıların tüm ana sürümlerinde çalışan bir açılır pencere örneği vereceğim. IE'de düzgün çalışmasını sağlamak için<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

Bu nedenle, düğmeli bir sayfamız var, tıklandığında bazı bilgilerin bulunduğu kalıcı bir pencere açılmalı ve diğer tüm içerikler bir kaplama ile gölgelenmelidir.

HTML koduyla başlayalım. Yapısı, yukarıda belirtilen koddan biraz farklı olacaktır, neden - makalenin devamında bu konuda daha fazlası; eleman sınıfları aynı kalacaktır:

< div class ="popup__overlay">
< div class ="popup">

Ve biraz CSS:

Popup__overlay (
pozisyon: sabit;
sol: 0;
üst: 0;
genişlik: %100;
yükseklik: %100;
z-endeksi: 999
}
.açılır (
}

Sabit boyutlar

Açılır (
sol: %50;
üst: %50;
genişlik: 400 piksel;
yükseklik: 200 piksel;
sol kenar boşluğu: -200 piksel;
üst kenar boşluğu: -100 piksel
}

Genişlik ve yüksekliğin yarısının negatif kenar boşlukları önemsiz ve sıkıcı, bu konuda orijinal bir şey değil.

Pop-up boyutları içeriğe bağlıdır

Açılır (
kenar boşluğu: otomatik
}

Bu, dikey hizalamayı hiçbir şekilde etkilemeyecektir ve bu arada, yalnızca yatay hizalamaya ihtiyacınız varsa, açılır pencerenin başka bir üst kenar boşluğunu belirterek orada durabilirsiniz. Ama bu bizim için yeterli değil! Devam et.

Dikey hizalama. İşte bu noktada ilginçleşiyor. Tabii ki, display: table & display: table-cell kullanan bir tablo veya tablonun öykünmesi böyle bir görevle sorunsuz bir şekilde başa çıkabilir, ancak bu işi eski IE'de yapmak daha pahalıdır. Tablo da ortadan kayboluyor - bariz nedenlerle.

Yani, marj zaten eksik - boyutları bilmiyoruz. Benzer etkilere sahip özelliklerin neler olduğunu hatırlayalım. Evet, metin hizalama. Ancak yalnızca satır içi öğeler için. TAMAM. Görünüşe göre Tanrı'nın kendisi display: inline-block - satır içi öğeler için özelliklerin uygulanabileceği bir blok öğesi kullanımını emretti. Bu özelliğin tüm tarayıcılarda da desteklenmesiyle, söylenebilecek her şey yolunda. Kod şöyle bir şey olur:

Popup__overlay (
pozisyon: sabit;
sol: 0;
üst: 0;
genişlik: %100;
yükseklik: %100;
z-endeksi: 999;
metin hizalama: orta
}
.açılır (
ekran: satır içi -blok;
dikey hizalama: orta
}

Dikey hizalama kalır - dikey hizalama bizim için iyidir. Başka herhangi bir durumda line-height kullanmak da uygun olacaktır, ancak sabit bir sayfa yüksekliğimiz olmadığı için (bu bağlamda line-height) burada kullanamıyoruz. Bilinmeyen boyutlardaki öğelerin dikey olarak hizalanmasıyla bir numara kurtarmaya gelir. Habré'de bu yöntemi bulduğumu tam olarak hatırlıyorum ama ne yazık ki o konuyla ilgili bir bağlantı bulamadım. Bu yöntem aşağıdakilerden oluşur: satır yüksekliğini ebeveynin yüksekliğinin %100'üne, yani sayfanın çalışma yüksekliğine "genişleten", sıfır genişlikte ve %100 yüksekliğe sahip bir satır içi blok öğesi eklenir. alan. Gereksiz işaretlemeler yerine sözde öğeler kullanarak daha şık hale getirelim:

Popup__overlay: sonra (
ekran: satır içi -blok;
genişlik: 0;
yükseklik: %100;
dikey hizalama: orta;
içerik: ""
}

Yarı saydam bir kaplama koyulaştırma eklemeye devam ediyor - rgba bunu halledecek. Her şey! Artık açılır pencerenin konumu yalnızca tarayıcı tarafından CSS düzeyinde kontrol edilir.

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.

Ama içindeki önemli yere rağmen bilgi desteği projesinde, 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 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 için geçişler kurduk ve onu aktif olmayan bir durumda gizledik.

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

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