girişcss formu ile kalıcı pencere. HTML5 ve CSS3'te kalıcı bir pencere nasıl oluşturulur
Bu derste deneyimli mizanpaj tasarımcıları ve css guruları için bir sır vermeyeceğim ancak bu makale yeni başlayanlar için faydalı olacaktır. Burası, sitenizin tamamında pop-up'ları nasıl oluşturacağınızı öğrenebileceğiniz yerdir.Çoğu zaman, bu tür pencereler sitede belirli eylemleri gerçekleştirdikten sonra görünür; örneğin, bir kullanıcı "Geri arama isteğinde bulun" bağlantısını tıklar ve önünde bir sipariş formu açılır.
PopUp pencerelerini ajax ile birlikte kullanmak çok uygundur, ancak bu başka bir dersin konusu.
PopUp açılır pencerelerini kullanan web'de giderek daha fazla web kaynağı görünmeye başlıyor. Örnek olarak herkes biliyor. sosyal ağlar... Ekran görüntülerindeki tüm gereksiz veriler kaldırıldı.
Temas halinde
heyecan
Şu soruyu incelemeye başlamak için yeterli neden olduğunu düşünüyorum: sitenizde bir PopUp pop-up'ı nasıl yapılır.
Sorun bildirimi (TOR)
Tüm sitenin üzerinde karartma ekranı olan bir açılır pencere oluşturmanız gerekir.Çözüm
Yöntem 1
html
css
* (font-family: Areal;) .b-container (genişlik: 200 piksel; yükseklik: 150 piksel; arka plan rengi: #ccc; kenar boşluğu: 0 piksel otomatik; dolgu: 10 piksel; yazı tipi boyutu: 30 piksel; renk: #fff;) .b-popup (genişlik: %100; yükseklik: 2000 piksel; arka plan rengi: rgba (0,0,0,0.5); taşma: gizli; konum: sabit; üst: 0 piksel;) .b-popup .b-popup -içerik (kenar boşluğu: 40 piksel otomatik 0 piksel otomatik; genişlik: 100 piksel; yükseklik: 40 piksel; dolgu: 10 piksel; arka plan rengi: # c5c5c5; kenarlık yarıçapı: 5 piksel; kutu gölgesi: 0 piksel 0 piksel 10 piksel # 000;)Sonuç:
Çok sık kullanılması önerilir:
pozisyon: mutlak;
Evet, sonuç aynı, ancak "gölgeleme" bloğunun yüksekliğini ayarladığımız için kaydırma çubukları çıkıyor. Bu nedenle bu yöntem uygun değildir.
Yöntem 2
Bu yöntem, Yöntem 1'den önemli ölçüde farklı değil, ancak daha uygun buluyorum.HTML (değişmedi)
Css
* (font-family: Areal;) .b-container (genişlik: 200 piksel; yükseklik: 150 piksel; arka plan rengi: #ccc; kenar boşluğu: 0 piksel otomatik; dolgu: 10 piksel; yazı tipi boyutu: 30 piksel; renk: #fff;) .b-popup (genişlik: %100; minimum yükseklik: %100; arka plan rengi: rgba (0,0,0,0.5); taşma: gizli; konum: sabit; üst: 0px;) .b-popup. b-popup içeriği (kenar boşluğu: 40px otomatik 0px otomatik; genişlik: 100px; yükseklik: 40px; dolgu: 10px; arka plan rengi: # c5c5c5; kenarlık yarıçapı: 5px; kutu gölgesi: 0px 0px 10px # 000;)Sonuç benzer
Mülk sayesinde: min-yükseklik: %100;"karartma" bloğumuz %100 genişlik kazandı ve Minimum yükseklik ekranın %100'ünde.tek dezavantajı Bu method bu mu Internet Explorer bu özelliği yalnızca 8.0 sürümünden beri destekler.
Jquery'ye sihir eklemek
Şimdi açılır penceremizi gizlemek / göstermek için bağlantılar ekleyelim.Bunu yapmak için JQuery kitaplığını ve küçük bir komut dosyasını bağlamanız gerekir:
Ayrıca Html'nin güncellenmesi gerekiyor:
Sonuç
Şimdi, sayfa yüklendiğinde PopUp kaybolacak.Sonucu burada görebilirsiniz.
Herkese merhaba, size çok kullanışlı bir şeyden bahsedeceğim. kalıcı pencere, kalıcı bir pencerenin nasıl yapıldığını anlayacağız? Birçoğu ne olduğunu anlamıyor, anladığınız bir dilde açıklamaya çalışacağım, başka bir deyişle - bu, bir düğmeye veya metne tıkladığınızda bir açılır penceredir.
Bu pencerenin içinde herhangi bir bilgi olabilir (video, resim, kod vb.) Sayfada görüntülenmemesi için kabul edilmesi gereken bazı materyaller olduğu için artık modal pencereyi daha fazla kullanmaya başladım, ama diyelim ki bir resim vardı, üzerine tıklayınca bir pencere açılıyor ve bilgi.
Geçenlerde bir sitede bunu yaptım, ana sayfaya bir resim ekledim, resim bile değil ama bir YouTube videosundan ekran görüntüsü ve tıkladığımda videoyu gösterdiği yerde bir pencere açılıyor. Böyle bir pencerenin bir örneği oyun ile sayfamda görülebilir, prensip aynıdır, resme tıkladığınızda oyunun olduğu bir pencere açılır. Bunu, oyunun genişlemesi içerik sütunumdan daha geniş olduğu için yaptım, bu yüzden durumdan böyle bir çıkış yolu buldum.
Css'de modal bir pencere düşünün, aklımızı karıştırmamak için, stilleri kullanacağız, yani ana dosyaya stiller ve penceremizdeki kodu yazar, her şeyi ne ve nasıl ayrıntılı olarak ele alacağız.
css'de modal pencere, modal pencere nasıl yapılır
İhtiyacımız olan ilk şey stiller, aşağıdaki kodun tamamını stiller ile kopyalayın ve ana stil dosyanıza, yani style.css içine yapıştırın.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | ... Pencere (konum: sabit; yazı tipi ailesi: Arial, Helvetica, sans-serif; üst: 0; sağ: 0; alt: 0; sol: 0; arka plan: rgba (0, 0, 0, 0.7); z-endeksi : 99999; - webkit geçişi: opaklık 400 ms kolaylaşma; - moz geçişi: opaklık 400 ms kolaylaşma; geçiş: opaklık 400 ms kolaylaşma; görüntüleme: yok; işaretçi olayları: yok;). Pencere: hedef (ekran: blok; işaretçi olayları: otomatik;). Pencere> div (genişlik: 460 piksel; konum: göreli; kenar boşluğu: %10 otomatik; dolgu: 30 piksel 10 piksel 10 piksel; sınır yarıçapı: 10 piksel; arka plan: #fff; kutu gölgesi: 0 piksel 0 piksel 20 piksel 2 piksel;). kapat (arka plan: # cc3300; 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 dekorasyonu: yok; yazı tipi- ağırlık: kalın; - webkit- sınır- yarıçap: 12 piksel; - moz- sınır- yarıçap: 12 piksel; sınır- yarıçap: 12 piksel; - moz- kutu- gölge: 1 piksel 1 piksel 3 piksel # 000; - webkit- kutu- gölge: 1 piksel 1 piksel 3px # 000; kutu gölgesi: 1px 1px 3px # 000;). kapat: üzerine gelin (arka plan: # 990000;) |
Pencere (konum: sabit; yazı tipi ailesi: Arial, Helvetica, sans-serif; üst: 0; sağ: 0; alt: 0; sol: 0; arka plan: rgba (0,0,0,0.7); z-endeksi : 99999; -webkit-geçişi: opaklık 400ms hareket kolaylığı; -moz-geçişi: opaklık 400ms hareket kolaylığı; geçiş: opaklık 400ms kolaylaşma; görüntüleme: yok; işaretçi olayları: yok;).Pencere: hedef (görüntüleme : blok; işaretçi olayları: otomatik;). Pencere> div (genişlik: 460 piksel; konum: göreli; kenar boşluğu: %10 otomatik; dolgu: 30 piksel 10 piksel; sınır yarıçapı: 10 piksel; arka plan: #fff; kutu gölgesi: 0px 0px 20px 2px;) .close (arka plan: #cc3300; color: #FFFFFF; satır yüksekliği: 25px; konum: mutlak; sağ: -12px; metin hizalama: merkez; üst: -10 piksel; genişlik: 24 piksel; metin -dekorasyon: yok; yazı tipi ağırlığı: kalın; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit -kutu gölgesi: 1 piksel 1 piksel 3 piksel # 000; kutu gölgesi: 1 piksel 1 piksel 3 piksel # 000;) .close: vurgulu (arka plan: # 990000;)
Kaydet, stiller ile oynayabilir ve daha güzel bir şey yapabilir, arka planı değiştirebilir, başka bir çerçeve yapabilir vb. Bu pencerenin açılmasını istediğiniz sayfaya gidin ve aşağıdaki kodu yapıştırın:
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" >Buton < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "Kapat" class = "close" >xPencerenin içeriği burada olacak |
Buton
Şimdi içinde ne var biraz analiz edelim, değiştirmeniz gerekiyor. nerede yazılıyor "Buton" oraya resim ve yazı gibi istediğinizi ekleyebilirsiniz, yani üzerine tıkladığınızda bir pencere açılacaktır. nerede yazıyor "Pencerenin içeriği burada olacak" açılır pencerede görmek istediğinizi girin, hepsi bu.
HABERLER!
Eh, takip haberlerinde, her zaman olduğu gibi, haberlere şimdiden sıkıldım)) Kendime küçük bir sayfa yaptım. Ortaklık Programı, formda, gidip görmek için herkesi pudralayacağım, belki birileri daha ilginç tavsiyeler verebilir, örneğin bir şey eklemek için, peki, neden bahsettiğimi biliyorsun. Hala onunla ilgili bazı düşünceler var, benimle bir video eklemek, belki bir talimat, peki, bunun gibi bir şey, Genel olarak sizden bir yorum bekliyorum!
Bir kez daha kalıcı (pop-up) pencereler oluşturma konusuna dönüyorum. Son zamanlarda, javascript kullanmadan açılır pencereleri yürütmek için çeşitli tekniklerle giderek daha fazla ilgileniyorum. jQuery eklentileri vesaire. Temiz stiller uygulama olasılığı ve yeni CSS3 özelliklerinin tükenmez potansiyeli daha fazla ilgi çekicidir.
Bazı saygın burjuvazinin gelişmelerine dayanarak, bu konuda kurnaz adamlar, CSS3 kullanarak modal pencereler oluşturma konusunda iyi sonuçlar elde ediliyor. Görev, her şeyden önce, nihai sonucun az çok kararlı çapraz tarayıcı uyumluluğunu sağlamak ve tabii ki, en az kayıpla, hem HTML hem de CSS'deki toplam kod miktarını azaltmaktır. uzun süredir acı çeken web sitesi kurucuları için hayatı kolaylaştırın.
Sonunda ne olur, bugün bu konuda var, sizinle birlikte göreceğiz ve aynı zamanda CSS3'ün "sihrini" kullanarak pop-up modal pencerelerin nasıl yapıldığını öğreneceğiz.
Başlangıç olarak, bu konuyla ilgilenen herkes, modal pencerelerin çeşitli sürümlerde nasıl çalıştığına dair bir örneğe göz atabilir ve kaynakları indirebilir:
Bu dersi bir eylem kılavuzu olarak almamalısınız, çünkü bu aşamada yalnızca modern tarayıcılarda kendinden emin destek elde etmek mümkündü ( IE 9+, Firefox, Safari, Opera, Chrome). IE tarayıcısının eski sürümlerinin kullanıcılar arasında hala oldukça popüler olduğunu göz önünde bulundurarak, bu makaleyi bir tür deney, CSS3'ün yeteneklerinin bir gösterimi olarak düşünmenizi tavsiye ederim.
Tamam, şimdi doğrudan düzenin kendisine gidelim. HTML Kodu ve modal penceremizi css3) kullanarak şekillendirme)))
1. Adım. HTML
İlk olarak, bazı temel HTML işaretlemesi oluşturalım. Gördüğünüz gibi, onları etkinleştirmek için modların ve düğmelerin (bağlantıların) html işaretlemesini düşünürsek, temel yapı oldukça basittir. Her kalıcı pencere, standart bir kapsayıcıdan başka bir şey değildir.
1. pencereyi aç 2. pencereyi aç 3. pencerede video 4. pencerede fotoğraf
başlık
Videonuzu buraya veya herhangi bir üçüncü taraf kaynak, YouTube, Vimeo vb. (iframe, gömme) ...
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 pencereleri aramak için bağlantılar, metin yapabilir veya bunları örnekte olduğu gibi harika, degrade düğmeler şeklinde tasarlayabilirsiniz.
Adım 2. CSS
Bir sonraki adım, bu en ilginç olanı, modal penceremiz için gerekli tüm stilleri hazırlamak önemlidir, dış görünüş ve işlevsellik ekleyin. 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: 1; görünürlük: gizli; / * karartma arka planı * / arka plan rengi: rgba (0, 0, 0, 0.7); opaklık: 0; konum: sabit; / * sabit konumlandırma * / imleç: varsayılan; / * imleç türü * / -webkit-transition: opacity .5s; -moz-transition: opaklık . 5s; -ms-geçişi: opaklık .5s; -o-geçişi: opaklık .5s; geçiş: opaklık .5s;) .overlay: hedef (görünürlük: görünür; opaklık: 1;) .is-image (üst: 0 ; sağ: 0; alt: 0; sol: 0; ekran: blok; kenar boşluğu: otomatik; genişlik: %100; yükseklik: otomatik; / * satır içi görüntülerin köşelerini yuvarlama * / -webkit-border-radius: 4px; -moz - border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * gömülü m-medya öğeleri, çerçeveler * / embed, 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 h1 (/ * başlık 1 * / renk: # 008000; metin hizalama: sol ; metin gölgesi: 0 1p x 3px rgba (0,0,0, .3); yazı tipi: 24px "Trebuchet MS", Helvetica, sans-serif; yazı tipi ağırlığı: kalın; ) .popup h2 (/ * başlık 2 * / renk: # 008000; metin hizalama: sol; metin gölgesi: 0 1 piksel 3 piksel rgba (0,0,0, .3); yazı tipi: 22 piksel "Trebuchet MS", Helvetica , sans-serif;) / *** Kalıcı pencere stilleri oluştur *** / .popup (üst: 0; sağ: 0; sol: 0; yazı tipi boyutu: 14 piksel; z-endeksi: 10; ekran: blok; görünürlük : gizli; kenar boşluğu: 0 otomatik; genişlik: %90; minimum genişlik: 320 piksel; maksimum genişlik: 600 piksel; / * sabit konumlandırma, pencere kaydırma sırasında sabittir * / konum: sabit; dolgu: 15 piksel; kenarlık: 1 piksel katı # 383838 ; / * köşeleri yuvarlama * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; arka plan rengi: #FFFFFF; / * dış kutu gölgesi * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); - ms-box -shadow: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); kutu-gölge: 0px 0px 6px rgba ( 0, 0 , 0, 0.8); / * tıklamada görünen pencerenin tam şeffaflığı * / opacity: 0; / * geçiş efekti (görünür) * / -webkit-transiti açık: tüm kolaylık .5s; -moz-geçiş: tüm kolaylık .5s; -ms-geçiş: tüm kolaylık .5s; -o-geçiş: tüm kolaylık .5s; geçiş: tüm kolaylık .5s; ) / * pencerenin görünmesini ve arka planı koyulaştırmasını etkinleştirin * / .overlay: target + .popup (üst: %20; / * göründüğünde pencerenin sayfanın üstünden konumu * / görünürlük: görünür; opaklık: 1; / * şeffaflığı kaldır * /) / * kapat düğmesini oluşturur * / .close (konum: mutlak; üst: -10 piksel; sağ: -10 piksel; dolgu: 0; genişlik: 20 piksel; yükseklik: 20 piksel; kenarlık: düz 2 piksel #ccc; -webkit-border-radius: 15px ; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; arka plan rengi: rgba (61, 61, 61, 0. sekiz); -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-dekorasyon: yok; yazı tipi ağırlığı: kalın; satır yüksekliği: 20 piksel; / * fareyle üzerine gelindiğinde değerleri ve geçiş efektini ayarlayın * / -webkit-transition: tüm kolaylıklar .8s; -moz-geçiş: tüm kolaylık .8s; -ms-geçiş: tüm kolaylık .8s; -o-geçiş: tüm kolaylık .8s; geçiş: tüm kolaylık .8s; ) .close: önce (renk: rgba (255, 255, 255, 0.9); içerik: "X"; metin gölgesi: 0 -1 piksel rgba (0, 0, 0, 0.9); yazı tipi boyutu: 12 piksel;) .close: üzerine gelin (arka plan rengi: rgba (252, 20, 0, 0.8); / * üzerine gelindiğinde düğmeyi döndürün * / -webkit-transform: döndür (360 derece); -moz-dönüşümü: döndür (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);) / * ek eklerken isteğe bağlı * / .popup p, .popup div (alt kenar boşluğu: 10px;)
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ğinize, metin içeriği, fotoğraflar, çeşitli kayıt formları ve herhangi bir içeriği yerleştirebileceğiniz harika bir kalıcı açılır pencere alacaksınız. geri bildirim veya herhangi bir üçüncü taraf kaynaktan video. Parametrelerle denemeler yapın, pencereyi istediğiniz gibi değiştirin ve mümkünse en iyi uygulamalarınızı ve aniden ortaya çıkan sorunları yorumlarda paylaşın.
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ç
kalıcı pencere
CSS3 kullanılarak oluşturulabilen basit bir kalıcı pencere örneği.
Mesajların görüntülenmesinden kayıt formuna kadar geniş bir yelpazede kullanılabilir.
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.
Oldukça sık, sitelerde modlar bulabilirsiniz ve hepsi farklı amaçlar için kullanılır. Gerçekten de, site arayüzünü daha etkileşimli ve kullanıcı dostu hale getirmenizi sağlayan oldukça güçlü bir araçtır. Örneğin, kalıcı pencereler, yetkilendirme formu, geri bildirim formu, ürün siparişi gibi çeşitli formlar için kullanılabilir ve asla bilemezsiniz.
Bu yazıda, modal basit bir pencerenin nasıl yapılacağına dair bir örneğe bakacağız. jQuery kullanarak ve CSS. Bu örneğin özelliği, jQuery kitaplığının kendisi dışında, burada gerekli olmamasıdır.
Modal kodunu sayfaya yerleştirin:
İşaretlemeden de görebileceğiniz gibi, kalıcı pencere bloğunun kendisi, id = özniteliğine sahip bir div'dir. modal_form kimliğe sahip bir yayılma öğesi içeren = modal_close... Bu öğe, mod penceresini kapatmak için bir düğme görevi görecek, ayrıca bloğun altında id = niteliğine sahip bir div var kaplama, aynı zamanda arka planı karartmaya da hizmet eder. Modal pencere, sınıfla birlikte referans olarak açılacaktır. modal.
Kalıcı pencere için CSS
#modal_form (genişlik: 300 piksel; yükseklik: 300 piksel; kenarlık yarıçapı: 5 piksel; kenarlık: 3 piksel # 000 katı; arka plan: #fff; konum: sabit; üst: %45; sol: %50; kenar boşluğu: -150 piksel; sol kenar boşluğu: -150 piksel; görüntü: yok; opaklık: 0; z-endeksi: 5; dolgu: 20 piksel 10 piksel;) #modal_form #modal_close (genişlik: 21 piksel; yükseklik: 21 piksel; konum: mutlak; üst: 10 piksel; sağ: 10px; imleç: işaretçi; ekran: blok;) #overlay (z-endeksi: 3; konum: sabit; arka plan rengi: # 000; opaklık: 0,8; -moz-opaklık: 0,8; filtre: alfa (opaklık = 80) ; genişlik: %100; yükseklik: %100; üst: 0; sol: 0; imleç: işaretçi; ekran: yok;)
İçin modal_form sabit bir genişlik ve yükseklik belirledik ve ardından konumu ekranın ortasına ortaladık. Kalıcı bir altlık için ( kaplama) boyutu ekranın genişliğine göre ayarlıyoruz, şeffaflıkla dolduruyoruz ve ayrıca varsayılan olarak gizleriz. ile özel bir an z-endeksi, kip, sayfadaki tüm öğelerin en büyüğüne sahip olmalıdır ve kapak, kipin kendisi dışında en büyüğüne sahip olmalıdır.
Şimdi en temele, bu javascript kodudur. Kalıcı pencere için iki ana olay kullanılacaktır, bu onun açılışıdır - sınıfa sahip bir öğeye tıklamak modal, bizim durumumuzda bu bir bağlantıdır ve kalıcı pencereyi kapatmak kapağa bir tıklamadır ( kaplama) veya kapat düğmesine tıklayın, bizim durumumuzda id = olan bir yayılma öğesidir. modal_close.
$ (belge) .ready (işlev () ($ (". modal"). tıklayın (işlev (olay) (event.preventDefault (); $ ("# bindirme")). fadeIn (400, // kapağı gösteren canlandırın function () (// ardından mod. penceresini göster $ ("# modal_form") .css ("ekran", "blok") .animate ((opaklık: 1, üst: "%50"), 200);) ); )); // mod penceresini kapat $ ("# modal_close, #overlay"). (fonksiyon () ($ ("# modal_form")) .animate ((opaklık: 0, üst: "%45") öğesine tıklayın , 200, // opaklığı azalt işlevi () (// animasyondan sonra $ (bu) .css ("display", "none"); // pencereyi gizle $ ("# overlay").fadeOut (400); / / tepsiyi gizleyin) );)));));
animate ile dikey konumu değiştiriyoruz Tepe hem de şeffaflık opaklık, ve bununla ilginç bir etki elde ederiz. Hem pencere açıldığında hem de kapatıldığında benzer bir efekt kullanılır. Aradaki fark, bloklar için özelliklerin uygulanma sırasının değişmesi ve böylece pencerenin açılıp kapanmasının görselleştirilmesidir.