O zaman bir sınıf eklememiz gerekiyor mod etkin, bu sınıf, modal pencereyi çağırmaktan sorumlu olacaktır, modal_header pencerenin başlığından ve stilinden sorumludur.

2. Adım: CSS

Şimdi stile geçelim, ilk adım sınıf buton, hangisi sorumlu olacak, tahmin ettiniz, sitedeki düğmeler için bunun için doğru ekran parametrelerini ayarladık:

Düğme ( arka plan: yok; arka plan klibi: dolgu kutusu; ekran: satır içi blok; kenarlık: 0; kullanıcı seçimi: yok; -webkit-dokunmatik-bilgi: yok; -webkit-görünümü: düğme; -webkit-kullanıcı -select: yok; -moz-user-select: yok; -ms-user-select: yok; )

Kapsayıcı (konum: göreli; kenar boşluğu:0 otomatik; maksimum genişlik: 960 piksel; kutu boyutlandırma: kenarlık kutusu; dolgu üstü: 40 piksel; )

makale ( arka plan: #fff; dolgu: 20 piksel; kenar boşluğu: 40 piksel; kenarlık yarıçapı: 5 piksel; ) .modal ( görüntü: yok; konum: sabit; üst: %50; genişlik: %100; yükseklik: otomatik; kenar boşluğu -top: -150px; arka plan rengi: $renk-beyaz; kenarlık yarıçapı: 3px; z-endeksi: 999; kutu gölgesi: 0px 1px 3px 0px koyulaştır($color-bg, 10%); @media #( $küçük) ( sol: %50; sol kenar boşluğu: -260 piksel; maksimum genişlik: 520 piksel; ) &.is-etkin ( görüntü: blok; animasyon: 1 sn doğrusal slayt; ) .inner ( konum: göreli; dolgu: 20 piksel ; ) ) .modal__header ( border-bottom: 1px solid darken($color-bg, 5%); ) .modal__footer ( text-align: center; button ( display: inline-block; ) )

Stiller oldukça basittir, ayrı bir dosyada saklanırlar ve CSS ile daha önce karşılaşmış bir geliştirici için bunları düzenlerken zorluklara neden olmamalıdır.

Adım 3JS

Son, ancak daha az önemli olmayan, menü göründüğünde arka planın otomatik olarak bulanıklaştırılması ve bağlantıların tıklanabilirliği olacaktır, küçük kurallar bu konuda bize yardımcı olacaktır. JS:

$("gövde").addClass("bulanık"); $(".toggleModal").on("click", function (event) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("bulanık"); ));

Sonuç olarak, ziyaretçinin gözüne hoş gelen ve tasarımınızı karmaşıklaştırmayan harika modal pencereler elde ediyoruz.

1. jQuery "Simple Modal Box" üzerindeki kalıcı pencere

2. jQuery eklentisi "LeanModal"

İçeriği kalıcı pencerelerde görüntüleyin. Eklentiyi demo sayfasında çalışırken görmek için şu bağlantıya tıklayın: Kaydolma Formu veya Temel İçerik.

3. jQuery Eklentisi "ToastMessage"

Açılır mesajlar. Eklenti iki versiyonda. Bir durumda, mesajlar kendi kendine kaybolur, belirli bir süre sonra, ikinci uygulamada mesajı kapatmak için düğmeye tıklamanız gerekir.

4. Kalıcı pencerede açılan içerik

Eklentiyi göster. Eklentiyi çalışırken görmek için demo sayfasındaki "Fire A Reveal Modal" düğmesine tıklayın.

5. Güzel İletişim Kutuları

Eklentiyi çalışırken görmek için demo sayfasındaki çarpı işaretine tıklayın.

6. Mootools Modal Penceresi, MooDialog Eklentisi

7. Ekranın üst kısmındaki jQuery açılır çubuğu

8.jQuery Açılır Penceresi

Bir açılır pencerede bir iletişim formu görüntülemek için jQuery eklentisi.

10. Facebook Diyaloglarını Uygulamak için MooTools "LightFace" Eklentisi

Facebook tarzı iletişim kutuları. Statik bilgilere ek olarak, pencerelere resimler, çerçeveler, Ajax istekleri koyabilirsiniz. Eklenti için birçok ayar, çok güçlü bir araçtır. Çok şık ve fonksiyonel görünüyor. Farklı içeriklere sahip örnekleri görmek için demo sayfasındaki bağlantıları takip edin.

11. jQuery kalıcı penceresi

Düzgün jQuery açılır iletişim kutusu.

12. jQuery Modalları

Güzel mod pop-up'ları. Üç stil. Demo sayfasında pencereleri aramak için 3 bağlantı vardır.

13. jQuery Modalları

Çeşitli türlerde açılır mod pencereleri. Eklentiyi çalışırken görmek için demo sayfasındaki bağlantıya tıklayın.

15. Sayfanın üstünde açılır mesaj

Mesaj, sırayla soluklaşan sayfanın üstünde görüntülenir. Açılır bir mesaj görmek için demo sayfasındaki "Beni tıkla" etiketine tıklayın. Haç üzerine tıklamak onu kapatacaktır. jQuery ile uygulandı.

16. Javascript'te modal penceresi "ModalBox"

Pop-up'ları ve sayfa yeniden yüklemelerini kullanmadan modern kalıcı iletişim kutuları uygulamak. Demo sayfasında, betiğin nasıl çalıştığını görmek için "Demoyu Başlat" düğmesine tıklayın.

17. Prototip kitaplığını kullanan "Leightbox" eklentisi

Kalıcı pencerelerde içeriği görüntülemek için eklenti.

Çeşitli site oluşturma teknikleri hakkında konuşurken, modal pencereler oluşturmanın bazı yollarından bahsetmemek saçma olur. Pop-up, modal pencereleri kullanmanın amacı, kullanışlılığı ve ortaya çıkan sorunları hakkında konuşmayacağız. Bu tür pencereler oluşturmanın birçok örneğinden sadece birine bir göz atalım.
Özel eklentileri kullanmanın mümkün olmadığı durumlar vardır, örneğin ve gibi, bu yüzden kendinizinkini nasıl oluşturabileceğinizi anlamaya değer.

Nasıl yapılacağına bakalım:

HTML

Aşağıdaki özelliklere sahip etiketler ekleyerek başlayalım:

• href - #?w=500 pencerenin genişliğini belirtir
• rel, her pencere için benzersiz bir niteliktir
• class="poplight" – açılır pencere gösterme sınıfı

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Pencereyi iş başında görün - Genişlik = 500 piksel

Pencereyi iş başında görün - Genişlik = 500 piksel

Ardından, açılır pencere için satır içi işaretlemeyi oluşturmamız gerekiyor. Sayfanın herhangi bir yerine, örneğin içeriğin altına yerleştirebilirsiniz. Pop-up kimliğinin öznitelikle eşleştiğini unutmayın. rel etiket
Bu, bağlantıyı ve açılır pencereyi birbirine bağlayacaktır.

Ve böylece, penceremizin sayfadaki yerleşimini anladık, şimdi onu stiller yardımıyla süsleyelim, deyim yerindeyse düzgün bir görünüm verelim.

CSS Düzeni

Daha fazla netlik için, penceremizin stil parametreleri için bazı açıklamalar yazdım. Pop-up'lar farklı boyutlara sahip olabileceğinden, CSS'de belirtmiyoruz popup_block pencerenin kenarlarını, gerekli boyutu hesaplayın, bu sadece .

#fade (ekran: yok; /*--varsayılan gizli--*/ arka plan : rgba (7 , 87 , 207 , 0.8 ) ; pozisyon : sabit ; sol: 0 üst : 0 ; genişlik : %100 yükseklik : %100 opaklık: .80 z-endeksi : 9999 ; .popup_block (görüntüleme: yok; /*--varsayılan olarak gizlidir--*/ arka plan : #fff ; dolgu: 20 piksel kenarlık : 8 piksel katı rgb (134 , 134 , 134 ) ; yüzer : sol ; yazı tipi boyutu: %85 pozisyon : sabit ; üst : %50 ; sol : %50 renk : #000 ; maksimum genişlik: 750 piksel minimum genişlik : 320 piksel ; yükseklik : otomatik ; z-endeksi : 99999 ; /*--CSS3 kutu gölgesi--*/-webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; kutu gölgesi: 0px 0px 20px #000; /*--CSS3 köşe yuvarlatma--*/-webkit-border-radius: 12px ; -moz-border-radius: 12px ; sınır yarıçapı : 12 piksel ; ) .popup_block p (yazı tipi ağırlığı: 400; dolgu: 0; kenar boşluğu: 0; renk: #000; satır yüksekliği: 1,6;) .popup_block h2 (kenar boşluğu: 0px 0 10px; renk: rgb (43, 43, 43) ); yazı tipi ağırlığı : 400 ; metin hizalama : merkez ; metin gölgesi : 1px 1px 2px #0D0C0C ; ) /* kapat düğmesini oluştur */.close (arka plan rengi: rgba (61, 61, 61, 0.8); kenarlık: 2 piksel düz #ccc; yükseklik: 25 piksel; satır yüksekliği: 20 piksel; konum: mutlak; sağ: -17 piksel; yazı tipi ağırlığı: kalın; metin hizalama : merkez ; metin süsleme : yok ; dolgu : 0 ; üst : -17 piksel ; genişlik : 25 piksel ; -webkit-border-yarıçapı: %50 ; -moz-border-radius: %50 ; -ms-border- yarıçap: %50 ; -o-border-radius: %50 ; border-radius : %50 ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box- shadow : 1px 1px 3px #000 ; ) .close : önce ( color : rgba (255 , 255 , 255 , 0.9 ) ; içerik : "X" ; yazı tipi boyutu : 12px ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.9 ) ; ) .close : vurgulu ( arka plan rengi : rgba (252 , 20 , 0 , 0.8 ) ; ) .shadow ( kutu-gölge : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px 10px #857373 ; -moz-box-shadow: 4px 4px 10px #857373 ; dolgu : 0 ; ) /*--IE6 için sabit konumlandırma--*/* html #fade (konum: mutlak;) * html .popup_block (konum: mutlak;)

#fade ( ekran: yok;/*--varsayılan olarak gizli--*/ arka plan: rgba(7, 87, 207, 0.8); konum: sabit; sol: 0; üst: 0; genişlik: %100; yükseklik: %100; opaklık: .80; z-endeksi: 9999; ) .popup_block ( ekran: yok; /*--varsayılan olarak gizli--*/ arka plan: #fff; dolgu: 20 piksel; kenarlık: 8 piksel katı rgb(134, 134, 134); kayan nokta: sol; yazı tipi boyutu: %85; konum: sabit; üst: %50; sol: %50; renk: #000; maksimum genişlik: 750 piksel; minimum genişlik: 320 piksel; yükseklik: otomatik ; z-endeksi: 99999; /*--CSS3 kutu gölgesi--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; kutu-gölge: 0px 0px 20px #000; /*--CSS3 köşe yuvarlama--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( yazı tipi-ağırlığı: 400 ; dolgu: 0; kenar boşluğu: 0; renk: #000; satır yüksekliği: 1,6;) : merkez; metin gölgesi: 1px 1px 2px #0D0C0C; ) /* kapat düğmesini oluşturur */ .close ( backgro und-color: rgba(61, 61, 61, 0.8); kenarlık: 2px düz #ccc; yükseklik: 25 piksel; satır yüksekliği: 20 piksel; pozisyon: mutlak; sağ: -17 piksel; yazı tipi ağırlığı: kalın; metin hizalama: merkez; metin-dekorasyon: yok; dolgu: 0; üst: -17 piksel; genişlik: 25 piksel -webkit-border-radius: %50; -moz-border-radius: %50; -ms-border-radius: %50; -o-sınır-yarıçapı: %50; sınır yarıçapı: %50 -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; kutu gölgesi: 1px 1px 3px #000; ) .close:before ( renk: rgba(255, 255, 255, 0.9); içerik: "X"; yazı tipi boyutu: 12 piksel; metin gölgesi: 0 -1 piksel rgba(0, 0, 0, 0.9); ) .close:hover ( background-color: rgba(252, 20, 0, 0.8); ) .shadow ( box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--IE6 için sabit konumlandırma--*/ *html #fade ( position: mutlak; ) *html .popup_block ( position: mutlak; )

Pencerenin oluşumu ve dış görünüş css kullanarak, belirli bir zorluk olmayacağını düşünüyorum. Stiller doğrudan üzerine yazılabilir HTML sayfası, etiketler arasında ve veya stillerinizin ayrı bir dosyasına, genellikle bu dosyaya koyabilirsiniz. stil.css, ya da böyle bir şey.

jquery kurulumu

Modal penceresinin tam çalışması için jQuery'ye bağlanmanız gerekiyor, bu kütüphanenin çalışmasına aşina olmayanlar okuyabilir.

Peki, devam edeceğiz. çoğunu yapabilirsin En son sürüm Kütüphane web sitesinden jQuery veya kapanış etiketinden önceki bölümde belgeye bağlayarak Google'ın bağırsaklarında barındırılan ayrı bir dosya kullanın bu satırı yerleştirerek:

Bir sonraki adımda, doldurma ve işlevleri göz önünde bulundurun jquery eklentisi, açılır penceremizi etkinleştirmek için kod, ne yaptığımızı daha iyi anlamak için bazı açıklamalar içerir.

jquery eklentisi

$(belge) . hazır(işlev()( //Sınıf poplight ve etiketin href niteliğine sahip bir bağlantıya tıklandığında İle birlikte #$("a.poplight") . klik(işlev () ( var popID = $(bu) .attr("rel" ) ; //pencerenin adını alıyoruz, yenilerini eklerken linkin rel özelliğindeki ismi değiştirmeyi unutmamak önemlidir. var popURL = $(this) . attr("href"); // bağlantının href özelliğinden boyutu al // href url'den istek ve değişkenler varquery=popURL. bölmek("?"); var dim= sorgu[ 1 ] . bölmek("&"); var popWidth = dim[ 0 ] . split("=" ) [ 1 ] ; //ilk sorgu dizesi değeri // Pencereye bir kapat düğmesi ekleyin$("#" + popID) . fadeIn() . css(( "genişlik" : Sayı( popWidth ) ) ) . başa ekle( "" ) ; //Merkez hizalaması için (dikey ve yatay) kenar boşluğunu (marj) belirleyin - yükseklik/genişliğe dolgu + css'de tanımlanan kenarlık genişliği dahil 80 ekleriz var popMargTop = ($("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . width() + 80 ) / 2 ; // Girinti miktarını ayarla$("#" + popID) . css(("üst kenar boşluğu" : - popMargTop, "sol kenar boşluğu" : - popMargLeft ) ) ; // Yarı saydam gölgelendirme arka planı ekle$("vücut") . ekle(" " ) ; //div kapsayıcı etiketinden önce yazılacak. $("#solma") . css(( "filtre" : "alfa(opaklık=80)" ) ) . fadeIn() ; // katman yarı saydamlığı, aptal IE için filtre yanlış döndür; ) ) ; //Pencereyi kapat ve arka planı karart$(belge) . on("click" , "a.close, #fade" , function () ( //pencerenin dışına tıkladığınızda kapatın, ör. arka planda...$("#solma, .popup_block" ) . fadeOut(function() ( $("#fade, a.close") . remove() ; // karartmak) ) ; yanlış döndür; ) ) ; ) ) ;

$(document).ready(function()( //Poplight sınıfı ve href etiketi özelliği olan bir bağlantıya tıklandığında c # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //pencere adını alıyoruz, adı değiştirmeyi unutmamak önemli yenilerini eklerken bağlantının rel özniteliğinde var popURL = $(this).attr("href"); //bağlantının href özelliğinden boyutu alın // href url'den sorgu ve değişkenler var query= popURL.split( "?"); var dim= query.split( "&"); var popWidth = dim.split("="); //ilk sorgu dize değeri //Pencereye bir kapat düğmesi ekleyin $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Merkez hizalama için kenar boşluğunu(marj) tanımlayın (dikey ve yatay) - yüksekliğe 80 ekleriz /width dolgu dahil + css'de tanımlanan kenarlık genişliği var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width() + 80 ) / 2; // Doldurma miktarını ayarlayın $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft )); //Yarı saydam bir karartma arka planı ekleyin $("vücut").append("

"); //div kapsayıcı etiketinden önce yazılacak. $("#fade").css(("filtre" : "alpha(opacity=80)")).fadeIn(); //katman yarı saydamlığı, aptal IE için filtre false döndürmek; )); //Pencereyi kapat ve arka planı soldur $(document).on("click", "a.close, #fade", function() ( //pencerenin dışında, yani arka planda tıkladığında kapat... $ ( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); // fade out )); return false; )); ));

Çözüm:

Genel olarak, vahşi doğaya girmezseniz ve kendinizi aşırı kod saçmalıkları ile yüklemezseniz, harika kalıcı penceremiz kullanıma hazırdır ve düşüncelerinizin metne veya başka herhangi bir şeye dönüştürülmesini bekler. kullanışlı bilgi.
İçine video veya büyük ölçekli görüntüler yerleştirmek için kalıcı bir pencere kullanmak isteyenler için, yine de gibi özel eklentiler kullanmanızı tavsiye ettim, çünkü yukarıdaki kalıcı pencere örneği daha çok hafif ve çok ağır olmayan bilgiler için tasarlanmıştır, ancak bu istenirse sorun olmaz.

Bir dahaki sefere kesinlikle bir örnekle anlatacağım ve göstereceğim ve elbette birçok kişi açılır penceredeki diğer üçüncü taraf nesneleri öğrenmekle ilgilenecek. Bu yüzden bizi izlemeye devam edin ve güncellemeler için bizi izlemeye devam edin!

Güncelleme: Sürüm dm-modal.js v1.3 (01/15/2017)
düzeltildi: Kullanımdan kaldırılan .live() işlevi, href*=\\# sözdizimi kullanılarak değiştirildi. Eklenti şimdi ile çalışıyor güncel sürümler jQuery kitaplıkları

Bu kadar! Umarım faydalı bir ders daha alırsınız.

Tüm saygımla, Andrew