HTML'de bir modal pencereyi nasıl aranır. JS'siz CSS'de Basit Modal Pencere

3. Referansın neden olduğu modal jquery penceresinin örneği (bir demo ile)

Büyük olasılıkla internette çevrimiçi bir pop-up çevrimiçi gördünüz modal pencere - Kayıt onayı, uyarı, referans bilgileri, dosya indirme ve çok daha fazlası. Bu derste, en basit modal pencereleri oluşturmak için birkaç örnek sunacağım.

Basit bir açılır modal pencere oluşturun

Hemen görünecek en basit modal pencerenin kodunu düşünmeye devam edeceğiz.
jquery kodu

Herhangi bir yerde kod ekle vücut. Senin sayfan. Sayfayı indirdikten hemen sonra, herhangi bir komut olmadan, bir sonraki pencereyi göreceksiniz:

Ancak, sayfanın tamamını tarayıcıya yükledikten sonra aşağıdaki kod gerçekleştirilecektir. Örneğimizde, görüntülerle bir sayfa yükledikten sonra, basit bir açılır pencere açılır:

CSS ile referansla modal jquery penceresini arayın

Bir sonraki adım yaratılış olacak modal pencere Bağlantıyı tıkladığınızda. Arka plan yavaşça loşar.

Sık sık giriş ve kayıt formunun bu pencerelerde bulunduğunu görebilirsiniz. Çalışmaya başlıyoruz

Başlamak, yazmak hTML parçası. Bu kod, belgenizin gövdesine yerleştirilir.

Modal bir pencere arayın

CSS Kodu. Ayrı bir CSS dosyasında veya içinde
JQuery Kodunda, ana dikkat, modal pencerenin ve maskenin konumuna, kademeli olarak loş bir arka plana odaklanacaktır.

Dikkat! Kütüphaneyi belgenin başındaki bağlamayı unutmayın!

Bir kütüphane Google'dan bağlama. Doğru, doğrudan jquery kodunun kendisi.

Jquery kodu

Herkese merhaba! Bu küçük sınıfta, saf CSS'de basit, ancak güçlü bir modal pencere yaratacağız. Aynı zamanda, (ve kimin için açacağım) FlexBox olarak böyle yararlı bir şey. Aynı zamanda, tıklayarak açılan ve tam olarak ekranın ortasına yerleştirilen bir modal pencere yaratmayacağız. Bir zamanlar sadece yapılabilir javascript kullanarakAncak zaman geçiyor ve şimdi tam anlamıyla 4 satır kod kullanılarak yapılabilir.

Modal penceresini aç

Bütün bu modal pencereler iki katmandan oluşur - bir sınıfa sahip olan ilk katman Modalwindow., modal pencerenin etrafındaki boşluğu koyulaşır ve pencerenin içeriğini ekranın ortasına hizalayacaktır. İkinci Katman - Sınıf Modal_body. - Modal pencerenin içeriğini doğrudan içerir.

Şimdi bu işaretleme için bir CSS kodu oluşturun:

Modal (pozisyon: sabit; ekran: yok; üst: 0; sağ: 0; alt: 0; sol: 0; z-index: 0; arka plan: rgba (0,0,0,0,0,7); işaretçi -Events: Yoktur;) .Modal: Hedef (Ekran: Flex; Pointer-Olaylar: Otomatik;) .Modal_Body (Konum: Bağıl; Z-Dizin: 2; Ekran: Blok; Marj: Otomatik; Dolgu: 15px; Arka Plan: # Fff;). Modalfull (Konum: Mutlak; Ekran: Blok; Z-Dizin: 0; Genişlik:% 100; Yükseklik:% 100;)

Modal pencerenin çalışmasına bakalım ve nasıl çalıştığını ayırt edelim.

Gördüğümüz gibi, "Modal pencereyi aç" na tıkladığınızda, pencere pencereyi gölgelendirir ve beyaz modal pencere tam olarak merkezde görünür. Bunu durdurana ve kendini teoriyi ayırana kadar.

Javascript kullanmamayı kabul ettiğimizden ve bunun yardımıyla yapamayacağımızdan bu yana. Elemanlara basmak, CSS-Pseudo-Sınıfları ve Hash'li çapa bağlantıları yardımıyla kolayca yapabiliriz. İD Bağlantıdaki işaretçiye eşit olması gereken bir değerle. Örneğimize bakın: hREF. Bağlantılar I. İD Modal pencerenin ana kabı aynı değere sahiptir - Modalwindow.. Bu önemlidir, çünkü tarayıcı hangi öğelerin birbirleriyle etkileşime gireceğini anlamalıdır.

Bizim durumumuzda, modal pencerenin genel konteyneri gizlenir ve buna göre, modal pencerenin tüm içeriği gizlenir. Ancak bağlantıya tıkladığınızda, öğe bir sözde sınıf alır : Hedef. Ve buna göre görünür. CSS Koduna bakın - mülk görüntüle S'yi değiştirir yok üzerinde esnek. Bu flex, çünkü onun yardımı ile aynı hizada olabiliriz. Modal_body. Tam olarak merkezli ekran. Hemen kendimiz için kayıtladığımız diğer tüm stiller.

Bu arada, ekranın tüm yüzeyindeki tüm yüzeyinin her yerinde nasıl düzleştirdiğini tam olarak anlamadıysanız, şu andaki her şeyi söylerim:

Üst: 0; Sağ: 0; Alt: 0; Sol: 0;

Sağdaki sıfır pikselde, solda, aynı anda üstte ve altta olması gerektiğini belirttik. Bunun yerine, örneğin böyle bir korumayı kullanabilirsiniz:

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

Burada ekranın% 100'üne eşit bir genişlik belirtiriz, ancak yüksekliği kurmak için daha iyidir. viewport yüksekliği - Tarayıcı penceresinin yüksekliği. Sürümümde duracağım.

Bir diğer önemli nüans, Z-Index özelliğinin değeridir. Modal ve Modal_body.. Mutlaka olmalı ve Modal_body. Mutlaka en az bir ünite daha değerli olması gerekir, aksi takdirde modal pencerenin içeriği kullanılamaz - bağlantılar ve düğmeler basmak mümkün olmayacaktır. Ve eğer orada bir kaydırma içeriği varsa, çalışmaz, çünkü bir eleman diğerini üst üste gelir.

Başyapıtınızı oluşturmaya devam edeceğiz. Tıkladığınızda, modal pencere görünür, ancak sadece kapatamayız. Kapatmak için bir düğme ekleyelim:

Aslında, o iptal eder : Hedef. Modal penceremiz için, sadece ilk pozisyonu alır - gözden gizleniyor. Ancak bu referans ile bazı incelikler var - basıldığında, tarayıcı böyle bir öğeyi bulmaya çalışacaktır, ancak FIASCO Acı çekecek ve sayfayı en başlangıcına çevirir. Bu davranış, modal pencerelerin imalatına böyle bir yaklaşımın küçük eklerinden biridir, ancak onunla başa çıkabilir.

Bu özellik için hREF. Referanslarımız ile değiştiğimiz «#» üzerinde "#Modalwindowclose"ve pencereyi açan link düğmesi, bir öznitelik ekle İD C aynı anlamı. Özniteliği kullanabilirsiniz İsim.Ancak HTML5'te, bağlantıyı belirlemek için özniteliği belirtmek için daha iyidir ve gereklidir. İD.

Modal penceresini aç

Şimdi tarayıcıya basmak düğmeye geri dönecektir. Gerçek uğruna, bu ankrajın ekranın üst kenarında bulunacağını söylemek istiyorum. Ancak açılış için bu düğme başlığın veya altbilgisinde ise, bu sorun seviyelendirilir. Ve başlığın sabit bir konumu varsa, hiç de harika olacaktır - örneğin, bir geri arama veya ön sipariş / danışma sipariş etmek için, iyi olacak ve pencereyi kapatırken.

İşte yaptıklarımıza bir örnek:

Konteyneri daha fazla değiştirebilirsiniz Modal_body. - Bunlar, boyuttaki sınırlamalardır (böylece yüksekliği ve genişliği kurutmaz). Ve bir tane daha küçük bir nüans - mümkün olduğunda, kapanış etiketinin önüne oturmak için modal bir pencere ile kod öneririm.

.

Bu, hızlı bir şekilde modal bir pencere yapabilirsiniz. Yazdığımız bu kod, gerekli stilleri ekleyerek temel versiyonda kullanılabilir.

Umarım dersim sizin için faydalıdır. Web Adaları'ndaki yeni toplantıya iyi günler!

Site için basit bir modal pencere, komut dosyalarını kullanmadan yalnızca HTML ve CSS kodu kullanılarak yapılabilir. Sonuçta, çok sayıda komut dosyası, doğal olarak, siteye yük ver ve işini yavaşlat.
Alternatif olarak, bu basit modal pencereye bakın. Minimum kod, ama oldukça iyi. Tabii ki, jquery modal pencerelerinde modülünde yükselmeyecek, ancak yine de.

CSS. Stil sayfasına koymak için arzu edilen kod, genellikle style.css

/ * Stil stilleri * / .window (pozisyon: sabit; üst: 0; sağ: 0; alt: 0; sol: 0; arka plan: rgba (0,0,0,0,0,7); z-index: 99999; -WebKit -Travition: Opaklık 400ms kolaylık; -moz-geçiş: Opaklık 400ms kolaylık kolaylığı; Geçiş: Opaklık 400ms kolaylık; Ekran: Yok; işaretçi-olaylar: Yok;) .Window: Hedef (Ekran: Blok; Pointere olayları: Auto;) .window\u003e div (genişlik: 300px; pozisyon: göreceli, marjı:% 10 otomatik; dolgu: 20px; kenarlık-yarıçapı: 5px; arka plan: # f2f2f2; kutu-gölge: 0px 0px 20px 2px ;). Kapat (arka plan: # cc3300; renk: #ffffffff; satır boyu: 25px; pozisyon: mutlak; sağ: -12px; metin-hizala: orta, üst: -10px; genişlik: 24px; metin dekorasyonu: Yok font ağırlığı: cesur; -Webkit-sınır-yarıçapı: 12px; -moz-kenarlık-yarıçapı: 12px; Sınır-yarıçapı: 12px; -moz-kutu-gölge: 1px 1px 3px # 000; -WebKit-Box-Gölge; : 1px 1px 3px # 000; kutu-gölge: 1px 1px 1px # 000;) .Close: Hover (arka plan: # 990000;) / * Stillerin sonu * /

Genişliğin boyutunu istenen olana değiştirerek modal pencerenin genişliğini ayarlayın. Kodda burası not edilir.

Doğru yerde verilen HTML kodu. Bu, esasen MODALI'nin açılışına bir referanstır.

bağlantı metni

Misal

WordPress'te Basit Bir Modal Pencereyi Takma

Wordpress'deki modal pencerenin kullanılması, pratik olarak yukarıdaki tarif edilenden farklı değildir. Örneğin, örneğin bir kısa kod eklenebileceğini ekleyebilirsiniz. geri bildirim Eklenti CF-7.

Modaal'ı yayınlamamakta değilse, ancak şablon dosyalarında, ardından basitçe koymak gerekirse hTML Kodu İstenilen yer şablonunda.

Sitede bir arama için farklı fonksiyonlar koyabileceğiniz, saf CSS'de tamamen gerçekleştirilen fonksiyonlar modal penceresinde basit. Muhtemelen, bu, prostat ayarları açısından, ayrıca kurulumun yanı sıra, modal pencere seçiminden tanıştığım birçok kişiden biridir. Ancak asıl şey, başkalarına pes etmeyecek işlevleridir. Ayrıca, varsayılan olarak uyarınca yapılır. işık tonuDüğmenin, çaprazlamanın şekli sağ üst köşeye monte edilir.

Hangi yolculuk işlevine gidecek, böylece çerçeve kaybolması, böylece bu küçük elementte bile renk paleti değiştirme üzerinde bir etki vardır. Şimdi Web Yöneticisi siteye konulabilir ve içinde farklı kategorileri istatistik veya bilgilendirici olarak çıkarabilen bir açıklama veya operatör yerleştirilebilir.

Ancak, gerçeği, kaynağın karanlık bir tarzınız varsa, tarzda, aralığı hızlı bir şekilde değiştirebilir veya orijinal tasarımın altına uygun olabilirsiniz. İşte biri biri standart yöntemler HTML bağlama ile bağlantının altındaki düğmeye tıkladığınızda, modal pencereye temiz CSS nasıl yapılır. Düğmeye, bir sınıfın çıkarılması tarzında ve adı, ana işlevsellik veya navigasyon sitesinin bulunduğu yerde, hem navigasyon veya kontrol panelinde teslim edilebilecek olan isim olacak.

Bu, her şeyin iyi çalıştığını kontrol eder:

Yükleme:

Düğmesi ile pencere

CSS.

Butksaton-Satokavate (
Ekran: satır içi blok;
Metin Dekorasyonu: Yok;
Marj-sağ: 7px;
Sınır-yarıçap: 5px;
Dolgu: 7px 9px;
Arka plan: # 199A36;
Renk: # FBF7F7! ÖNEMLİ;
}

Anelumen (
Ekran: Flex;
Konum: Sabit;
Sol: 0;
En iyi 100%;
Genişlik:% 100;
Yükseklik:% 100;
Hizala-Öğeler: Merkez;
Justify-Content: Center;
Opaklık: 0;
-WebKit-Geçiş: Top 0s .7s, Opaklık .7s 0s;
Geçiş: Üst 0s .7s, Opaklık .7S 0S;
}

Anelumen: Hedef (
Üst: 0;
Opaklık: 1;
-WebKit-Geçiş: Yok;
Geçiş: Yok;
}

Anelümen Şekil (
Genişlik:% 100;
Maksimum genişlik: 530px;
Konum: 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: 7px;
Dolgu-top: 8px;
Sınır: 3px katı #aaabad;
}

Anelumen.Lowingnuska Şekil H2 (
Marj-Top: 0;
Dolgu-alt: 3px;
Sınır alt: 1px katı # DCD7D7;
}

Anelumen: Hedef Şekil (
Opaklık: 1;
}

Anelumen.Lowingnuska .compatibg-kiawise (
Metin Dekorasyonu: Yok;
Konum: Mutlak;
Sağ: 8px;
Üst: 0px;
Yazı tipi boyutu: 41px;
}

Anelumen .nedistiseg (
Sol: 0;
Üst: 0;
Genişlik:% 100;
Yükseklik:% 100;
Konum: Sabit;
Arka plan rengi: RGBA (10, 10, 10, 0.87);
İçerik: "";
İmleç: Varsayılan;
Görünürlük: Gizli;
-WebKit-Geçiş: tüm .7s;
Geçiş: tüm .7s;
}

Anelumen: Hedef .Nedismiseg (
Görünürlük: Görünür;
}

Ayrıca, CSS ve Pseudoclass'ın stillerinin, bu, birçok ilginç olası uygulama ile CSS işlevlerine göre tam olarak kullanılmayanlardan biri olduğunu bilmeniz gerekir.

Ne zaman başlar URL adresi Sayfalar Tanımlayıcıyı elemenle karşılamak veya farklı şekilde ifade edilebilir, bu, kullanıcı sayfadaki belirli bir öğeye atlarken.

Modal pencereler - Web Master'ın arsenalinde sık kullanılan bir araç. Çözmek için çok başarılı Çok sayıda Kayıt formlarının çıktısı, reklam blokları, mesajlar vb. Gibi görevler.

Ancak, projenin bilgi desteğinindeki önemli bir yere rağmen, işlevselliği veya ters uyumluluğu genişletirken sorun yaratabilecek olan JavaScript'te modal pencereler uygulanır.

HTML5 ve CSS3, olağanüstü kolaylıkla modal pencereler oluşturmanıza olanak sağlar.

HTML İşaretleme

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

Modal penceresini aç

DIV öğesinin içinde modal pencerenin 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ştirin. Örneğimiz için tam işaretleme şöyle görünecek:

Modal penceresini aç

Stiller

Bir sınıf oluştur modaldialog. Ve oluşturmaya başla görünüm:

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 -index: 99999; -Webkit-Geçiş: Opaklık 400ms kolaylık kolaylığı; -moz-geçiş: Opaklık 400ms kolaylık kolaylığı; Geçiş: Opaklık 400ms kolaylığı; Ekran: Yok; İşaretçi-olaylar: Yok;)

Penceremiz sabit bir konuma sahip olacak, yani sayfayı açık bir pencere ile kaydırırsanız, aşağı kaydırılır. Ayrıca, siyah arka planımız tüm ekranda genişletilecektir.

Arka plan küçük bir şeffaflığa sahip olacak ve ayrıca özelliği kullanarak diğer tüm elementlerin tepesinde bulunur. z endeksi..

Sonunda, modal penceremizi çıkartmaya ve etkin olmayan bir durumda gizlemeye geçişleri ayarladık.

Belki mülkü bilmiyorsundur İşaretçi olayları.Ancak, eşyaların fare düğmesine basıldığında nasıl yanıt vereceğini kontrol etmenizi sağlar. Sınıf için değerinin değerini belirledik modaldialog., Link, sahte sınıf aktif olduğunda fare düğmesine basılmaya yanıt vermemesi gerektiğinden ": Hedef".

Şimdi bir sözde sınıf ekle : Hedef. Ve modal pencere için stiller.

Modaldialog: Hedef (ekran: blok; işaretçi-olaylar: otomatik;) .Modaldialog\u003e div (genişlik: 400px; pozisyon: göreceli, marjı:% 10 otomatik; dolgu: 5px 20px 13px 20px; sınır-yarıçapı: 10px; arka plan: # FFF; arka plan: -Moz-linear gradyan (#FFF, # 999); arka plan: -Webkit-lineer gradyan (#FFF, # 999); arka plan: -O-linear gradyan (#FFF, # 999); )

Pseudo sınıfı hedef. Öğenin çıkış modunu değiştirir, bu nedenle bağlantıya tıkladığınızda modal penceremiz görüntülenecektir. Ayrıca mülkün değerini de değiştiririz. İşaretçi olayları..

Modal pencerenin genişliğini ve sayfadaki konumunu tanımlarız. Ayrıca arka plan ve yuvarlatılmış köşeler için degradeyi belirliyoruz.

Pencereyi kapat

Şimdi pencere kapanış işlevini uygulamanız gerekir. Düğmenin görünümünü oluşturuyoruz:

Kapat (Arka Plan: # 606061; Renk: #FFFFFF; Hat Yüksekliği: 25px; Konum: Mutlak; Sağ: -12PX; Metin-Hizala: Merkez; Üst: -10px; Genişlik: 24px; Metin-Dekorasyon: Yok; Yazı Tipi Ağırlık: kalın; -Webkit-Sınır-yarıçapı: 12px; -moz-Sınır-yarıçapı: 12px; Sınır-yarıçapı: 12px; -moz-kutu-gölge: 1px 1px 3px # 000; -WebKit-Box-Shadow: 1px 1px 3px # 000; kutu-gölge: 1px 1px 3px # 000;) .Close: Hover (arka plan: # 00d9ff;)

Bizim düğmemiz için, metnin arka planını ve konumunu belirledik. Sonra düğmeyi konumlandırıyoruz, çerçevenin yönlendirme özelliklerini kullanarak yuvarlak kılar ve bir ışık gölge oluştururuz. Fare imlecini vurduğunuzda, renk arka planını değiştireceğiz.