1. jQuery’dagi modal oyna “Simple Modal Box” 2. jQuery plagini “LeanModal”

Tarkibni modal oynalarda ko'rsatish. Plaginni demo sahifasida ishlayotganini ko'rish uchun havolani bosing: Ro'yxatdan o'tish shakli yoki Asosiy tarkib.

3. jQuery plagini “ToastMessage”

Qalqib chiquvchi xabarlar. Plagin ikkita versiyada keladi. Bitta holatda, xabarlar ma'lum vaqtdan keyin o'z-o'zidan yo'qoladi, ikkinchi amalga oshirishda xabarni yopish uchun siz tugmani bosishingiz kerak.

4. Modal oynada ochiladigan kontent

"Oshkora" plagini. Plaginni ishlayotganini ko'rish uchun demo sahifasidagi “Fire A Reveal Modal” tugmasini bosing.

5. Yoqimli dialog oynalari

Plaginni ishlayotganini ko'rish uchun demo sahifasidagi xochni bosing.

6. Mootools modal oynasi, “MooDialog” plagini 7. Ekran tepasida jQuery qalqib chiquvchi paneli 8. jQuery qalqib chiquvchi oynasi

Formani ko'rsatish uchun jQuery plagini fikr-mulohaza qalqib chiquvchi oynada.

10. Amalga oshirish uchun MooTools plagini "LightFace" dialog oynalari Facebook

Facebook uslubidagi dialog oynalari. Statik ma'lumotlarga qo'shimcha ravishda siz tasvirlar, ramkalar, Ajax so'rovlari. Plagin qanday ishlashi uchun juda ko'p sozlamalar, juda kuchli vosita. Juda zamonaviy va funktsional ko'rinadi. Turli kontentga ega misollarni ko'rish uchun demo sahifasidagi havolalarga amal qiling.

11. jQuery modal oynasi

jQuery'da toza qalqib chiquvchi dialog oynasi.

12. jQuery modal oynalari

Yoqimli qalqib chiquvchi modal oynalar. Uch uslub. Namoyish sahifasida oynalarni ochish uchun 3 ta havola mavjud.

13. jQuery modal oynalari

Bir necha turdagi qalqib chiquvchi modal oynalar. Plaginni ishlayotganini ko'rish uchun demo sahifasidagi havolani bosing.

15. Sahifaning tepasida ochiladigan xabar

Xabar sahifaning yuqori qismida ko'rsatiladi, bu esa o'z navbatida xiralashgan. Qalqib chiquvchi xabarni ko'rish uchun demo sahifasida "Meni bosing" tugmasini bosing. Xoch ustiga bosish uni yopadi. jQuery yordamida amalga oshirilgan.

16. Javascriptdagi “ModalBox” modal oynasi

Qalqib chiquvchi oynalar va sahifalarni qayta yuklamasdan zamonaviy modal dialoglarni amalga oshiring. Skriptni amalda ko'rish uchun demo sahifasida "Demoni boshlash" tugmasini bosing.

17. Prototype kutubxonasidan foydalangan holda "Leightbox" plagini

Modal oynalarda kontentni ko'rsatish uchun plagin.

Haqida gapirish turli texnikalar veb-sayt yaratish, sizga modal oynalarni yaratishning ba'zi usullari haqida gapirmaslik kulgili bo'lar edi. Biz qalqib chiquvchi va modal oynalardan foydalanishning maqsadi, foydaliligi va paydo bo'ladigan muammolarini muhokama qilmaymiz. Keling, bunday oynalarni yaratishning ko'plab misollaridan birini ko'rib chiqaylik.
Va kabi maxsus plaginlardan foydalanish mumkin bo'lmagan holatlar mavjud, shuning uchun o'zingizni qanday yaratishingiz mumkinligini tushunishga arziydi.

Keling, buni qanday qilishni ko'rib chiqaylik:

HTML

Keling, quyidagi atributlarga ega teglar qo'shishdan boshlaylik:

• href - #?w=500 oynaning kengligini bildiradi
• rel - har bir oyna uchun noyob atribut
• class="poplight" - qalqib chiquvchi oynani ko'rsatish uchun sinf

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Amalda oynaga qarang - Kenglik = 500px

Amalda oynaga qarang - Kenglik = 500px

Keyin qalqib chiquvchi oyna uchun inline markup yaratishimiz kerak. Siz uni sahifaning istalgan joyiga, masalan, kontentning pastki qismiga joylashtirishingiz mumkin. Qalqib chiquvchi identifikator tegning rel atributiga mos kelishini unutmang
Bu havola va qalqib chiquvchi oynani bir-biriga bog'laydi.

Sarlavha

Siz xohlagan matn

Shunday qilib, biz sahifamizdagi derazamizning joylashishini aniqladik, endi uni uslublar yordamida bezatamiz, ta'bir joiz bo'lsa, unga munosib ko'rinish beraylik.

CSS tartibi

Aniqroq bo'lishi uchun men oynamizning uslub parametrlari uchun ba'zi tushuntirishlarni yozdim. Qalqib chiquvchi oynalar turli o'lchamlarga ega bo'lishi mumkinligi sababli, biz CSS popup_blockda oynaning chekkalarini ko'rsatmaymiz; kerakli o'lchamni hisoblash .

#fade (displey: yo'q; /* --standart yashirin -*/ fon: rgba (7, 87, 207, 0,8); pozitsiyasi: qattiq; chap: 0; yuqori: 0; kengligi: 100%; balandligi: 100%; shaffoflik: .80; z-indeks: 9999; ) .popup_block (displey: yo‘q; /*--sukut bo‘yicha yashirin--*/ fon: #fff; to‘ldirish: 20px; chegara: 8px qattiq rgb (134, 134, 134) ; float: chap; shrift o‘lchami: 85 %; joylashuv: belgilangan; tepa: 50%; chap: 50%; rang: #000; maksimal kenglik: 750px; min. kenglik: 320px; balandlik: avtomatik; z-indeks: 99999; /*--CSS3 blok soyasi --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--CSS3 burchakni yaxlitlash--* / -webkit-border-radius: 12px; -moz-border-radius: 12px; chegara radiusi: 12px; ) .popup_block p (shrift og'irligi: 400; to'ldirish: 0; chekka: 0; rang: #000; chiziq -balandlik : 1,6 ; .popup_block h2 ( hoshiya : 0px 0 10px ; rang : rgb (43 , 43 , 43 ) ; shrift og'irligi : 400 ; matnni tekislash : markaz ; matn soyasi : 1px 1px ; #DK0C /C * yopish tugmachasini hosil qiling */ .yopish (fon rangi: rgba (61, 61, 61, 0,8); chegara : 2px qattiq #ccc ; balandligi: 25px; chiziq balandligi: 20px; pozitsiyasi: mutlaq; o'ngda: -17px; shrift vazni: qalin; matnni tekislash: markaz; matn bezatish: yo'q; to'ldirish: 0; yuqori: -17px; kengligi: 25px; -webkit-chegara-radius: 50% ; -moz-chegara-radius: 50% ; -ms-chegara radiusi: 50% ; -o-chegara radiusi: 50% ; chegara radiusi: 50%; -moz-box-soya: 1px 1px 3px #000 ; -webkit-box-soya: 1px 1px 3px #000 ; quti soyasi: 1px 1px 3px #000; ) .yopish : oldin (rang : rgba (255 , 255 , 255 , 0.9 ) ; kontent : "X" ; shrift oʻlchami : 12px ; matn soyasi : 0 -1px rgba (0 , 0 , 0 , 0.9 ) ; .yopish: hover (fon rangi: rgba (252, 20, 0, 0,8); ) .soya (box-soya: 4px 4px 10px #857373; -webkit-box-shadow: 4px 4px 10px #85; box-shadow: 4px 4px 10px #857373; toʻldirish: 0 ; ) /*--IE6 uchun oʻrnatilgan joylashuv--*/ * html #fade (pozitsiya: mutlaq; ) * html .popup_block (pozitsiya: mutlaq; )

#fade (displey: yo'q;/*--sukut bo'yicha yashirin--*/ fon: rgba(7, 87, 207, 0,8); pozitsiya: o'zgarmas; chap: 0; tepa: 0; kenglik: 100%; balandlik: 100%; shaffoflik: .80; z-indeksi: 9999; ) .popup_block (displey: yo‘q; /*--sukut bo‘yicha yashirin--*/ fon: #fff; to‘ldirish: 20px; chegara: 8px qattiq rgb(134, 134, 134); suzuvchi: chap; shrift o'lchami: 85%; pozitsiya: qat'iy; yuqori: 50%; chap: 50%; rang: #000; maksimal kenglik: 750px; minimal kenglik: 320px; balandlik: avtomatik ; z-index: 99999; /*--CSS3 quti soyasi--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 burchakni yaxlitlash--*/ -webkit-chegara-radius: 12px;-moz-chegara-radius: 12px; chegara-radius: 12px; ) .popup_block p (shrift-ogʻirligi: 400; to‘ldirish: 0; chekka: 0; rang: #000; chiziq balandligi: 1,6;).popup_block h2 (chekka: 0px 0 10px; rang: rgb(43, 43, 43); shrift og‘irligi: 400; matnni tekislash : markaz; matn soyasi: 1px 1px 2px #0D0C0C; ) /* yopish tugmachasini hosil qiling */ .yopish (fon rangi: rgba(61, 61, 61, 0.8); chegara: 2px qattiq #ccc; balandligi: 25px; chiziq balandligi: 20px; pozitsiyasi: mutlaq; o'ngda: -17px; shrift vazni: qalin; matnni tekislash: markaz; matn dekoratsiyasi: yo'q; to'ldirish: 0; yuqori: -17px; kengligi: 25px; -webkit-border-radius: 50%; -moz-chegara-radius: 50%; -ms-border-radius: 50%; -o-chegara radiusi: 50%; chegara radiusi: 50%; -moz-box-soya: 1px 1px 3px #000; -webkit-box-soya: 1px 1px 3px #000; quti soyasi: 1px 1px 3px #000; ) .yopish: oldin (rang: rgba(255, 255, 255, 0.9); kontent: "X"; shrift oʻlchami: 12px; matn soyasi: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover (fon rangi: rgba(252, 20, 0, 0.8); ) .soya (box-soya:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--IE6 uchun aniq joylashishni aniqlash--*/ *html #fade (pozitsiya: mutlaq; ) *html .popup_block (pozitsiya: mutlaq; )

Oyna va uning shakllanishi bilan ko'rinish Bilan css yordamida, Menimcha, hech qanday maxsus qiyinchiliklar bo'lmaydi. Uslublarni to'g'ridan-to'g'ri ro'yxatdan o'tkazishingiz mumkin HTML sahifasi, va teglari orasiga yoki uni uslublaringizning alohida fayliga qo'yishingiz mumkin, odatda bu style.css fayli yoki shunga o'xshash narsadir.

JQuery-ni sozlash

Uchun to'liq huquqli ish modal oynada jQuery-ni ulashingiz kerak, bu kutubxonaning ishi bilan tanish bo'lmaganlar o'qishi mumkin.

Xo'sh, biz davom etamiz. Siz eng ko'p qila olasiz oxirgi versiya Kutubxona veb-saytidan JQuery yoki Google chuqurligida joylashgan alohida fayldan foydalaning, uni hujjatga ulang, yopilish yorlig'i oldidagi bo'limda quyidagi qatorni qo'ying:

Keyingi bosqichda biz to'ldirish va funktsiyalarni ko'rib chiqamiz jQuery plagini, qalqib chiquvchi oynani faollashtirish uchun kodda nima qilayotganimizni yaxshiroq tushunish uchun ba'zi tushuntirishlar mavjud.

JQuery plagini

$(hujjat). ready(funksiya () ( //Poplight klassi va href tegi atributiga ega havolani bosganda # $("a.poplight") bilan. click(function () ( var popID = $(this) . attr("rel" ) ; //oyna nomini oling, rel atributidagi nomni o'zgartirish uchun yangilarini qo'shganda unutmaslik kerak. havola var popURL = $(this) . attr(" href" ) ; //havolaning href atributidan oʻlchamni oling //soʻrov va href url dan oʻzgaruvchilar var query= popURL. split ("?" ) ; var dim = query[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=" ) [ 1 ] ; //so'rovlar qatorining birinchi qiymati //Oynaga yopish tugmasi qo'shing $( "#" + popID) .fadeIn() .css(("kenglik" : Raqam( popWidth ) ) ).("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#) " + popID) . width() + 80 ) / 2 ; //Chizma qiymatini o'rnating $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ); // Shaffof qorayish fonini qo'shish $("tana" ) . append("" ); //div konteyner tegdan oldin joylashtiriladi. $("#fade"). css(("filtr": "alfa(shaffoflik=80)") ). fadeIn(); //qatlam shaffofligi, ahmoq IE uchun filtr false qaytaradi; ) ; //Oynani yoping va fonni xiralashtiring $(hujjat) . on("click" , "a.close, #fade" , function () ( //oyna tashqarisida bosish orqali yopish, ya'ni fonda... $("#fade , .popup_block" ) . fadeOut(funksiya ( ) ( $("#fade, a.close" ) . remove() ; // silliq o'chadi ) ) ; false qaytarish; ) ); ) ;

$(document).ready(function())( //Poplight klassi va href tegi atributiga ega havolani bosganda bilan # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //oyna nomini oling, o'zgartirishni unutmaslik kerak. yangilarini qo'shganda havolaning rel atributidagi nom var popURL = $(this).attr("href"); //havolaning href atributidan o'lchamni oling //so'rov va href url var so'rovidan o'zgaruvchilar = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //so'rovlar qatorining birinchi qiymati //Yopish tugmasi qo'shing oyna $("#" + popID).fadeIn().css(( "kenglik": Number(popWidth) )).prepend(""); //Marjani (vertikal va gorizontal) tekislash uchun chetni (chekkani) aniqlang. - CSS-da belgilangan to'ldirish + ramka kengligini hisobga olgan holda balandlik / kenglikka 80 qo'shamiz var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#) " + popID).width() + 80) / 2; //Chizma qiymatini o'rnating $("# " + popID).css(("margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); // Shaffof qorayish fonini qo'shing $("tana").append(""); //div konteyner tegdan oldin ro'yxatga olinadi. $("#fade").css(("filtr" : "alfa(shaffoflik=80)")).fadeIn(); //qatlam shaffofligi, ahmoq IE uchun filtr false qaytaradi; ))) //Oynani yoping va fonni o'chiring $(document).on("click", "a.close, #fade", function() ( //oyna tashqarisida, ya'ni fonda bosish orqali yoping... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade out )); return false; )); )))

Xulosa:

Umuman olganda, agar siz begona o'tlarga kirmasangiz va keraksiz gobbledygook kodini yuklamasangiz, bizning ajoyib modal oynamiz ishlashga tayyor va sizning fikringizni matnga yoki boshqa foydali ma'lumotlarga tarjima qilishni kutmoqda.
Unga video yoki katta hajmdagi tasvirlarni joylashtirish uchun modal oynadan foydalanmoqchi bo'lganlar uchun men shunga o'xshash maxsus plaginlardan foydalanishni maslahat berdim, chunki modal oynaning yuqoridagi misoli ko'proq engil va unchalik og'ir bo'lmagan ma'lumotlar uchun mo'ljallangan, ammo bu Agar xohlasangiz, muammo emas.

Keyingi safar men sizga aniq aytib beraman va sizga misol bilan ko'rsataman va ko'pchilik qalqib chiquvchi oynada boshqa uchinchi tomon ob'ektlari haqida bilishga qiziqadi. Shunday ekan, internetda adashib qolmang va bizni kuzatib boring!

Yangilanish: dm-modal.js v1.3 versiyasi (15/01/2017)
Tuzatildi: eskirgan .live() funksiyasi oʻrniga href*=\\# sintaksisi qoʻllanildi. Plagin endi jQuery kutubxonasining joriy versiyalari bilan ishlaydi

Ana xolos! Umid qilamanki, bu yana bir foydali dars bo'ldi.

Hurmat bilan, Endryu

Ko'pincha veb-saytlarda modal oynalarni topishingiz mumkin va ularning barchasi turli vazifalar uchun ishlatiladi. Aslida, bu juda kuchli vosita bo'lib, u sayt interfeysini yanada interaktiv va qulayroq qilish imkonini beradi. Masalan, modal oynalar avtorizatsiya shakli, fikr-mulohaza shakli, mahsulotga buyurtma berish kabi turli shakllar uchun ishlatilishi mumkin va siz hech qachon bilmaysiz.

Ushbu postda biz JQuery va CSS yordamida oddiy modal oynani qanday yasash misolini ko'rib chiqamiz. Ushbu misolning o'ziga xos xususiyati shundaki, JQuery kutubxonasining o'zi bundan mustasno, bu talab qilinmaydi.

Modal oyna kodini sahifaga joylashtiring:

yoping Modal oynani ochish

Belgilashdan ko'rinib turibdiki, modal oyna blokining o'zi id= atributiga ega div hisoblanadi. modal_form unda id= bo'lgan span elementi mavjud modal_yopish. Ushbu element modal oynani yopish tugmasi bo'lib xizmat qiladi, bundan tashqari, blok ostida id= atributli div bloki mavjud. qoplama, bu ham fonni qoraytirishga xizmat qiladi. Modal oyna havola orqali, sinf bilan ochiladi modal.

Modal oyna uchun CSS

#modal_forma (kenglik: 300px; balandlik: 300px; chegara radiusi: 5px; hoshiya: 3px #000 qatʼiy; fon: #fff; joylashuv: qatʼiy; tepa: 45%; chap: 50%; chet-usti: -150px; chap chekka: -150px; displey: yoʻq; shaffoflik: 0; z-indeks: 5; toʻldirish: 20px 10px; ) #modal_form #modal_yopish (kenglik: 21px; balandlik: 21px; pozitsiya: mutlaq; tepa: 10px; oʻng: 10px; kursor: koʻrsatgich; displey: blok; ) #overlay (z-indeks:3; pozitsiya: belgilangan; fon rangi:#000; shaffoflik:0,8; -moz-shaffoflik:0,8; filtr:alfa(shaffoflik=80) ; kenglik: 100%; balandlik: 100%; tepa: 0; chap: 0; kursor: ko'rsatgich; displey: yo'q; )

Uchun modal_form biz belgilangan kenglik va balandlikni o'rnatdik va keyin joyni ekranning o'rtasiga o'rnatdik. Modal oyna foni uchun ( qoplama) biz ekranning kengligiga mos keladigan o'lchamni o'rnatamiz, shaffoflik bilan to'ldiramiz va uni sukut bo'yicha yashiramiz. bilan maxsus daqiqa z-indeks, modal sahifadagi barcha elementlarning eng kattasiga, qopqoq esa modalning o'zidan tashqari barcha elementlarning eng kattasiga ega bo'lishi kerak.

Endi eng asosiy narsaga kelsak, bu JavaScript kodi. Modal oyna uchun ikkita asosiy hodisa qo'llaniladi: uning ochilishi - sinf bilan elementni bosish modal, bizning holatlarimizda bu havola va modal oynani yopish qopqoqni bosishdir ( qoplama), yoki yopish tugmasini bosing, bizning holatlarimizda bu id= bo'lgan span elementidir modal_yopish.

$(document).ready(function() ( $(".modal").click(funksiya(voqe)( event.preventDefault(); $("#overlay").fadeIn(400, // displeyni jonlantiring. qopqoq funksiyasi ()( // keyingi mod oynasini ko'rsatish $("#modal_form") .css("displey", "blok") .animate((shaffoflik: 1, tepa: "50%"), 200); )); )); // modal oynani yopish $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((shaffoflik: 0, tepa: "45% "), 200, // shaffoflik funksiyasini kamaytirish())( // animatsiyadan keyin $(this).css("display", "none"); // oynani yashirish $("#overlay").fadeOut (400); // fonni yashirish ) ); ))) ));

Animatsiya yordamida biz vertikal holatni o'zgartiramiz yuqori, shuningdek shaffoflik shaffoflik, va bu bilan biz qiziqarli effektga ega bo'lamiz. Xuddi shunday effekt oynani ochishda ham, uni yopishda ham qo'llaniladi. Farqi shundaki, bloklarga xossalarni qo'llash tartibi o'zgaradi va shu bilan oynaning ochilishi va yopilishini ingl.

Modali oynalar zamonaviy veb-dizaynning ajralmas qismi bo'lib, ularning yordami bilan ishlab chiquvchi bir sahifada aylanish usuliga murojaat qilishi mumkin va tashrif buyuruvchini ikkinchi darajali sahifalarga yo'naltirmaydi. Ushbu qo'llanmada jQuery va CSS3 yordamida veb-saytingiz uchun loyqa fonga ega ajoyib modal oynalarni qanday yaratishni ko'rib chiqamiz. Ushbu qoidalar tufayli biz tashrif buyuruvchining ko'zini faqat saytdagi kerakli ma'lumotlarga bog'laydigan oyna paydo bo'lganda loyqa fonni yaratamiz.

CSS3 da loyqa fonli modal oynalar

Eng yaxshi iqtisodiy yangiliklar faqat shu yerda: Drobakha

Oyna animatsiyasi shunday o'rnatiladiki, siz tugmani bosganingizda paydo bo'lganda, oyna yuqoridan pastgacha jonlanadi va fonning xiralashishi avtomatik ravishda kuchayadi.

1-qadam. HTML

Bizda quyidagilar bo'lgan konteyner bo'ladi: sarlavha, tavsif, keyin modal oynani ochish uchun toggleModal klassi bilan tugma uchun sinf qo'shamiz:

Sarlavha

Tavsif

Oyna uchun maqola sarlavhasini oching

Yorliqlar veb-sayt yaratishda juda qiziqarli va qulay narsa bo'lib, ular saytdagi joyni tejash bilan birga ma'lumotlarni to'g'ri tartibga solish imkonini beradi.

Yopish

Keyin modal is-active sinfini qo'shishimiz kerak, bu klass modal oynani chaqirish uchun javobgar bo'ladi, modal__header sarlavha va uning oyna uslubi uchun javobgardir.

2-qadam: CSS

Endi uslubga o'tamiz, birinchi qadam tugmalar sinfi bo'ladi, siz taxmin qilganingizdek, saytdagi tugmalar uchun javobgar bo'ladi, biz buning uchun to'g'ri displey parametrlarini o'rnatamiz:

Tugma (fon: yo'q; fon-klip: to'ldirish qutisi; displey: inline-blok; chegara: 0; foydalanuvchi-tanlash: yo'q; -webkit-touch-callout: yo'q; -webkit-appearance: tugma; -webkit-user -tanlash: yo'q; -moz-user-tanlash: yo'q; -ms-user-tanlash: yo'q; )

Konteyner (joylashuvi: nisbiy; chekka: 0 avtomatik; maksimal kenglik: 960px; quti oʻlchami: chegara qutisi; toʻldirish tepasi: 40px; )

maqola (fon: #fff; toʻldirish: 20px; pastki chet: 40px; chegara radiusi: 5px; ) .modal (ekran: yoʻq; joy: oʻzgarmas; tepa: 50%; kenglik: 100%; balandlik: avtomatik; chekka -tepasi: -150px; fon rangi: $rang-oq; chegara radiusi: 3px; z-indeks: 999; quti soyasi: 0px 1px 3px 0px qorayish($color-bg, 10%); @media #( $kichik) (chap: 50%; chekka-chap: -260px; maksimal kenglik: 520px; ) &.is-faol (displey: blok; animatsiya: 1s chiziqli slayd; ) .inner (pozitsiya: nisbatan; toʻldirish: 20px ; ) .modal__header (chegara-pastki: 1px qattiq qorayish ($color-bg, 5%); ) .modal__footer (matnni tekislash: markaz; tugma (displey: inline-blok; ) )

Uslublar juda oddiy, ular saqlanadi alohida fayl va kamida bir marta CSS bilan duch kelgan ishlab chiquvchi uchun ularni tahrirlashda qiyinchiliklarga olib kelmasligi kerak.

3-qadam. JS

Bizning oxirgi, ammo muhimi, menyu paydo bo'lganda avtomatik fonni xiralashtirishni o'rnatish, shuningdek havolalarni bosish imkoniyati, kichik JS qoidalari bunga yordam beradi:

$("tana").addClass("loyqalangan"); $(".toggleModal").on("klik", funksiya (voqea) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("tana").toggleClass ("loyqalangan"); ));

Natijada tomoshabinning ko'zini quvontiradigan va dizayningizni chalkashtirmaydigan ajoyib modal oynalar.

3. Havoladan chaqiriladigan jQuery modal oynasiga misol (Demodan)

Ehtimol, siz Internetda qalqib chiquvchi modal oynani bir necha marta ko'rgansiz - ro'yxatdan o'tishni tasdiqlash, ogohlantirish, ma'lumotnoma, faylni yuklab olish va boshqalar. Ushbu qo'llanmada men eng oddiy modal oynalarni yaratish bo'yicha bir nechta misollarni taklif qilaman.

Oddiy qalqib chiquvchi modal oyna yaratish Keling, darhol paydo bo'ladigan oddiy modal oyna uchun kodni ko'rib chiqaylik.
jQuery kodi

$(hujjat).ready(funksiya()
{
ogohlantirish ("Qalqib chiquvchi oynadagi matn");
});

Kodni sahifangizning istalgan joyiga joylashtiring. Sahifani yuklagandan so'ng darhol hech qanday buyruqlarsiz quyidagi oynani ko'rasiz:

Ammo butun sahifa brauzerga yuklangandan so'ng quyidagi kod bajariladi. Bizning misolimizda, sahifani rasmlar bilan yuklagandan so'ng, oddiy qalqib chiquvchi oyna ochiladi:

$(oyna).load(funksiya()
{
alert("Sahifa yuklash tugallandi!)");
});

CSS bilan havoladan jQuery modal oynasini chaqirish Keyingi qadam havola bosilganda modal oynani yaratishdir. Fon asta-sekin qorayadi.

Kirish va ro'yxatdan o'tish shakllari bunday oynalarda joylashganligini tez-tez ko'rishingiz mumkin. Keling, biznesga kirishaylik

Birinchidan, html qismini yozamiz. Biz ushbu kodni hujjatingizning asosiy qismiga joylashtiramiz.

Modal oynani chaqirish

Modal oyna matni
Yopish
Modal oynadagi matn.

CSS kodi. Yoki alohida CSS faylida yoki boshida.

tanasi (
font-family:verdana;
shrift o'lchami: 15px;
}
.link (rang:#fff; matn bezatish: yo'q)
.link: kursor (rang: #fff; matn bezatish: tagiga chizilgan)
#niqob (
pozitsiya: mutlaq;
chap: 0;
yuqori: 0;
z-indeks: 9000;
fon rangi:#000;
ko'rsatish: yo'q;
}
#boxes.window (
pozitsiya: mutlaq;
chap: 0;
yuqori: 0px;
- tepada: 40px;
kengligi: 440px;
balandligi: 200px;
ko'rsatish: yo'q;
z-indeks: 9999;
to'ldirish: 20px;
toshib ketish: yashirin;
}
#qutilar #muloqot oynasi (
kengligi: 375px;
balandligi: 203px;
to'ldirish: 10px;
fon rangi: #ffffff;
}
.top(
pozitsiya: mutlaq;
chap: 0;
yuqori: 0;
kengligi: 370px;
balandligi: 30px;
fon: #0085cc;
to'ldirish: 8px 20px 6px 10px;
}
.yopish(
float:o'ng;
}
.content(
to'ldirish ustki qismi: 35px;
}

JQuery kodida biz asosiy e'tiborni modal oyna va niqobning holatiga qaratamiz, bizning holatlarimizda fonning asta-sekin qorayishi.

Diqqat! Hujjat boshiga kutubxonani kiritishni unutmang!

Kutubxonani Google veb-saytidan ulash. Xo'sh, jQuery kodining o'zi.

jQuery kodi

$(hujjat).ready(funksiya() (
$("a").-ni bosing(funksiya(e))
e.preventDefault();
var id = $(bu).attr("href");
var maskHeight = $(hujjat).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("sekin",0,8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("yuqori", winH/2-$(id).height()/2);
$(id).css("chap", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").-ni bosing(funktsiya (e))
e.preventDefault();
$("#mask, .window"). hide();
});
$("#mask").-ni bosing (funktsiya () ()
$(bu). hide();
$(".window"). hide();
});
});