CSS3 -da fon xiralashgan modallar. JQuery jQuery ToastMessage plagini

Ko'pincha siz veb -saytlarda modallarni topishingiz mumkin va ularning barchasi har xil vazifalarni bajarish uchun ishlatiladi. Haqiqatan ham, bu sayt interfeysini yanada interaktiv va foydalanuvchilarga qulay qilish imkonini beradigan juda kuchli vosita. Masalan, modal oynalar avtorizatsiya shakli, teskari aloqa shakli, mahsulotga buyurtma berish kabi turli shakllar uchun ishlatilishi mumkin va siz hech qachon bilmaysiz.

Bu xabarda biz jQuery va CSS yordamida oddiy modal oynani yasash misolini ko'rib chiqamiz. Bu misolning o'ziga xos xususiyati shundaki, bu erda talab qilinmaydi, faqat jQuery kutubxonasidan tashqari.

Modal oyna kodini sahifaga joylashtiring:

Modali oynani ochish

Belgilanishdan ko'rinib turibdiki, modal blokining o'zi id = atributli div modal_form id = ga ega bo'lgan span elementini o'z ichiga oladi modal_close... Bu element modal oynani yopish tugmasi bo'lib xizmat qiladi, bundan tashqari, blok ostida id = atributli div mavjud. qoplama, bir vaqtning o'zida fonni qorong'ilashga xizmat qiladi. Modali oyna mos yozuvlar bilan, sinf bilan ochiladi modal.

Modal oyna uchun CSS

#modal_form (kenglik: 300 piksel; balandlik: 300 piksel; chegara radiusi: 5 piksel; chegara: 3 piksel #000 qattiq; fon: #fff; pozitsiya: sobit; tepa: 45%; chap: 50%; chekka-tepa: -150 piksel; chekka-chap: -150 piksel; displey: yo'q; shaffoflik: 0; z-indeks: 5; to'ldirish: 20 piksel 10 piksel;) #modal_form #modal_yopiq (kenglik: 21 piksel; balandlik: 21 piksel; pozitsiya: mutlaq; yuqori: 10 piksel; o'ng: 10px; kursor: ko'rsatgich; displey: blok;) # ustki qatlam (z-indeks: 3; pozitsiya: sobit; fon rangi: # 000; shaffoflik: 0,8; -moz-shaffoflik: 0,8; filtr: alfa (shaffoflik = 80) ; kenglik: 100%; balandlik: 100%; yuqori: 0; chap: 0; kursor: ko'rsatgich; ko'rsatish: yo'q;)

Uchun modal_form biz qattiq kenglik va balandlikni o'rnatdik, so'ngra ekranning o'rtasiga joylashtirdik. Modali taglik uchun ( qoplama) biz o'lchamni ekranning kengligiga o'rnatamiz, shaffoflikni to'ldiramiz, shuningdek uni sukut bo'yicha yashiramiz. Bilan maxsus lahza z-indeks, modal sahifadagi barcha elementlarning eng kattasiga ega bo'lishi kerak, va muqovada modalning o'zidan boshqa eng kattasi bo'lishi kerak.

Endi eng asosiysi, bu javascript kodi. Modali oyna uchun ikkita asosiy voqea qo'llaniladi, bu uning ochilishi - sinf bilan elementni bosish modal, bizning holatimizda bu havola va modal oynani yopish - qopqog'ini bosish ( qoplama), yoki yopish tugmachasini bosing, bizning holatda bu id = bo'lgan intervalli element modal_close.

$ (hujjat) .ni function () (// keyin mod. oynasini ko'rsatish $ ("# modal_form") .css ("display", "block") .animate ((shaffoflik: 1, tepa: "50%"), 200);) $; "# modal_close, #overlay") modal oynasini yoping. bosing (function () ($ ("# modal_form") .animate ((shaffoflik: 0, tepa: "45%") , 200, // shaffoflikni pasaytirish funktsiyasi () (// $ (bu) animatsiyasidan keyin .css ("ko'rsatish", "hech biri"); // $ oynasini yashirish ("# qoplamasi"). FadeOut (400);/ / qoplamani yashirish));));));

Jonli yordamida biz vertikal holatni o'zgartiramiz tepa, shuningdek oshkoralik shaffoflik va bu bilan biz qiziqarli effektga ega bo'lamiz. Shunga o'xshash effekt oyna ochilganda ham, yopilganda ham qo'llaniladi. Farqi shundaki, bloklar uchun xususiyatlarni qo'llash tartibi o'zgartiriladi va shu bilan oynaning ochilishi va yopilishi tasvirlanadi.

3. Malumot bilan chaqirilgan jQuery modal oynasiga misol (Demo bilan)

Ehtimol, siz Internetda bir necha bor modali oynani ko'rdingiz - ro'yxatdan o'tishni tasdiqlash, ogohlantirish, yordam ma'lumotlari, fayllarni yuklab olish va boshqalar. Ushbu qo'llanmada men eng oddiy modal oynalarni yaratish bo'yicha ba'zi misollar keltiraman.

Qanday qilib oddiy qalqib chiquvchi modalni yaratish mumkin

Darhol paydo bo'ladigan eng oddiy modal oynaning kodini o'rganishni boshlaymiz
jQuery kodi

Kodni istalgan joyga joylashtiring tana Sizning sahifangiz. Sahifani yuklagandan so'ng, hech qanday buyruqsiz, siz shunday oynani ko'rasiz:

Butun sahifa brauzerga yuklanganidan keyin quyidagi kod bajariladi. Bizning misolimizda, sahifani rasmlar bilan yuklagandan so'ng, oddiy qalqib chiquvchi oyna ochiladi:

CSS yordamida mos ravishda jQuery modal oynasini chaqirish

Keyingi qadam - yaratish modali oyna havolani bosganda. Fon asta -sekin qorayadi.

Kirish va ro'yxatdan o'tish shakllari bunday oynalarda joylashganligini tez -tez ko'rish mumkin. Keling, ishni boshlaylik

Birinchidan, yozaylik html qismi... Biz ushbu kodni hujjatingizga joylashtiramiz.

Modali oynani chaqirish

CSS kodi... Yoki alohida CSS faylida yoki ichida
JQuery kodida biz modal va niqobning holatiga e'tibor qaratamiz, bunda fon asta -sekin qorayadi.

Diqqat! Hujjat boshiga kutubxonani kiritishni unutmang!

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

JQuery kodi

Sayt yaratishning turli usullari haqida gapirganda, modal oynalarni yaratishning ba'zi usullari haqida gapirmaslik kulgili bo'lardi. Biz qalqib chiquvchi, modali oynalarni ishlatishning maqsadi, foydaliligi va paydo bo'layotgan muammolarini muhokama qilmaymiz. Keling, bunday oynalarni yaratishning ko'plab misollaridan birini tahlil qilaylik.
Maxsus plaginlarni ishlatishning iloji bo'lmagan holatlar mavjud, masalan, va, shuning uchun siz o'zingiz qanday qilib o'zingiz yaratishingiz mumkinligini tushunishga arziydi.

Keling, buni qanday qilishni ko'rib chiqaylik:

Html

Quyidagi atributlarga ega bo'lgan teglarni qo'shishdan boshlaylik:

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

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Qarang: Amaldagi oyna - Kenglik = 500 piksel

Qarang: Amaldagi oyna - Kenglik = 500 piksel

Keyinchalik, biz qalqib chiquvchi oynada ichki belgilashni yaratishimiz kerak. Siz uni sahifaning istalgan joyiga, masalan, kontentning pastki qismiga qo'yishingiz mumkin. E'tibor bering, qalqib chiquvchi identifikator atributga mos keladi rel teg
Bu havola va qalqib chiquvchi oynani bog'laydi.

Shunday qilib, biz derazamizni sahifada qanday joylashishini aniqladik, endi uni uslublar bilan bezatamiz, aytaylik, munosib ko'rinish beramiz.

CSS tartibi

Tushunarli bo'lishi uchun men derazamizning uslub parametrlariga ba'zi tushuntirishlar yozdim. Qalqib chiquvchi oynalar har xil o'lchamda bo'lishi mumkinligi sababli, biz CSS-da ko'rsatmaganmiz popup_block derazaning chekkalari, kerakli hajmni hisoblash uchun, bu faqat vazifadir.

#fade (ko'rsatish: yo'q; / * - sukut bo'yicha yashirilgan - * / fon: rgba (7, 87, 207, 0,8); pozitsiya: sobit; chapda: 0; yuqori: 0; kengligi: 100%; balandligi: 100%; shaffoflik: .80; z-indeks: 9999; ) .popup_block (ko'rsatish: yo'q; / * - sukut bo'yicha yashirilgan - * / fon: #fff; to'ldirish: 20 piksel; chegara: 8 pikselli qattiq rgb (134, 134, 134); suzish: chap; shrift o'lchami: 85%; pozitsiya: sobit; yuqori: 50%; chapda: 50%; rang: # 000; maksimal kenglik: 750 piksel; min kengligi: 320 piksel; balandligi: avtomatik; z-indeks: 99999; / * - CSS3 qutisi soyasi - * /-webkit-box-shadow: 0px 0px 20px # 000; -moz-box-soya: 0px 0px 20px # 000; quti soyasi: 0 piksel 0 piksel 20 piksel # 000; / * - CSS3 burchakni yaxlitlash - * /-webkit-chegara-radiusi: 12 piksel; -moz-chegara-radiusi: 12 piksel; chegara radiusi: 12 piksel; ) .popup_block p (shrift og'irligi: 400; to'ldirish: 0; chegara: 0; rang: # 000; chiziq balandligi: 1,6;) .popup_block h2 (chegara: 0px 0 10 piksel; rang: rgb (43, 43, 43) ); shrift og'irligi: 400; matnni tekislash: o'rtada; matn soyasi: 1 piksel 1 piksel 2 piksel # 0D0C0C;) / * yopish tugmachasini yarating * /.yaqin (fon rangi: rgba (61, 61, 61, 0,8); chegara: 2px qattiq #ccc; balandlik: 25 piksel; chiziq balandligi: 20 piksel; pozitsiya: mutlaq; o'ng: -17 piksel; shrift og'irligi: qalin; matnni tekislash: markaz; matnni bezatish: yo'q; to'ldirish: 0; tepa: -17px; kenglik: 25 piksel; -webkit-chegara radiusi: 50%; -moz-chegara-radiusi: 50%; -ms-chegara- -radius: 50%; soya: 1px 1px 3px # 000;) .yaqin: oldin (rang: rgba (255, 255, 255, 0,9); tarkib: "X"; shrift o'lchami: 12 piksel; matn soyasi: 0 -1 piksel rgba (0, 0, 0, 0.9);) .yopish: hover (fon rangi: rgba (252, 20, 0, 0.8);) .soya (quti-soya: 4px 4px 10px # 857373; -webkit-quti-soya: 4 piksel) 4px 10px # 857373; -moz-box-shadow: 4px 4px 10px # 857373; to'ldirish: 0;) / * - IE6 uchun qattiq joylashishni aniqlash - * /* html #fade (pozitsiya: mutlaq;) * html .popup_block (pozitsiya: mutlaq;)

#fade (displey: yo'q; ; shaffoflik: .80; z -indeks: 9999;) .popup_block (ko'rsatish: yo'q; / * - sukut bo'yicha yashirilgan - * / fon: #fff; to'ldirish: 20 piksel; chegara: 8 pikselli qattiq rgb (134, 134, 134) ; suzish: chap; shrift o'lchami: 85%; pozitsiya: sobit; yuqori: 50%; chap: 50%; rang: # 000; maksimal kenglik: 750 piksel; min-kenglik: 320 piksel; balandlik: avtomatik; z-indeks : 99999; / *-CSS3 qutisi soyasi- * / -webkit-quti-soyasi: 0 piksel 0 piksel 20 piksel # 000; -CSS3 burchaklarni yaxlitlash- * / -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;) .popup_block p (shrift-vazn: 400; to'ldirish: 0; chekka: 0) ; rang: # 000; chiziq balandligi: 1,6;) .popup_block h2 (chegara: 0px 0 10 piksel; rang: rgb (43, 43, 43); shriftning og'irligi: 400; matnni tekislash: markaz; matn soyasi: 1px 1px 2px # 0D0C0C;) / * yopish tugmachasini * / .close (backgro) rangsiz: rgba (61, 61, 61, 0,8); chegara: 2 pikselli qattiq #ccc; balandligi: 25 piksel; chiziq balandligi: 20 piksel; pozitsiya: mutlaq; o'ng: -17 piksel; shrift og'irligi: qalin; matnni tekislash: markaz; matnni bezatish: yo'q; to'ldirish: 0; yuqori: -17 piksel; kengligi: 25 piksel; -webkit-chegara-radiusi: 50%; -moz-chegara-radiusi: 50%; -ms-chegara-radiusi: 50%; -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; ) .yaqin: oldin (rang: rgba (255, 255, 255, 0,9); tarkib: "X"; shrift o'lchami: 12 piksel; matn soyasi: 0 -1px rgba (0, 0, 0, 0,9);) .yopish: hover (fon rangi: rgba (252, 20, 0, 0,8);) .soya (quti-soya: 4 piksel 4 piksel 10 piksel # 857373; -webkit-quti-soya: 4 piksel 4 piksel 10 piksel # 857373; -moz- box -shadow: 4px 4px 10px # 857373; padding: 0;) / * - IE6 uchun sobit joylashuv - * / * html #fade (pozitsiya: mutlaq;) * html .popup_block (pozitsiya: mutlaq;)

CSS yordamida oynaning paydo bo'lishi va uning paydo bo'lishi bilan menimcha, hech qanday qiyinchiliklar bo'lmaydi. Uslublar to'g'ridan -to'g'ri HTML sahifasida, teglar orasiga yozilishi mumkin va, yoki siz uni uslubingizning alohida fayliga qo'yishingiz mumkin, odatda bu fayl uslub.css, yoki shunga o'xshash narsa.

JQuery -ni sozlash

Modal oynaning to'liq ishlashi uchun siz jQuery-ni ulashingiz kerak, bu kutubxona ishi bilan tanish bo'lmaganlar o'qishi mumkin.

Xo'sh, biz davom etamiz. Siz jQuery -ning eng so'nggi versiyasini kutubxona veb -saytidan foydalanishingiz yoki Google -da joylashgan alohida faylni hujjatga bog'lash orqali yopilish belgisidan oldingi bo'limda ishlatishingiz mumkin.

shunga o'xshash qatorni qo'yish orqali:

Keyingi bosqichda biz jquery plaginining to'ldirilishi va funktsiyalarini ko'rib chiqamiz, ochilgan oynamizni faollashtirish uchun kod nima qilayotganimizni yaxshiroq tushunish uchun ba'zi tushuntirishlarni o'z ichiga oladi.

JQuery plagini

$ (hujjat). tayyor (funktsiya () ( // Poplight klassi va tag atributining href havolasini bosganda # bilan$ ("a.poplight"). bosing (function () (var popID = $ (this). attr ("rel")); // deraza nomini oling, yangisini qo'shganda havolaning rel atributidagi nomni o'zgartirishni unutmaslik kerak. var popURL = $ (bu). attr ("href"); // havolaning href atributidan o'lchamni oling // href url -dan so'rov va o'zgaruvchilar var so'rovi = popURL. Split ("?"); var dim = so'rov [1]. Split ("&"); var popWidth = dim [0]. ajratish ("=") [1]; // so'rovlar satrining birinchi qiymati // Oynaga yopish tugmasini qo'shing$ ("#" + popID). fadeIn (). css (("kenglik": son (popWidth)))). oldindan "" ) ; // Markaziy hizalama uchun chegarani (chegarani) aniqlang (vertikal va gorizontal) - biz CSS -da belgilangan chegara + kengligini hisobga olgan holda balandlik / kenglikka 80 qo'shamiz. var popMargTop = ($ ("#" + popID). balandlik () + 80) / 2; var popMargLeft = ($ ("#" + popID). width () + 80) / 2; // To'ldirish miqdorini belgilang$ ("#" + popID). css (("margin -top": - popMargTop, "margin -left": - popMargLeft)); // Yarim shaffof soyali fonni qo'shing$ ("tana"). qo'shish (" " ) ; // div konteyner tegdan oldin yoziladi . $ ("# xira"). css (("filtr": "alfa (shaffoflik = 80)")). fadeIn (); // qatlam shaffofligi, zerikarli IE uchun filtr noto'g'ri qaytarish; )); // Derazani yoping va fon qorayadi$ (hujjat). ustida ("bosish", "a.close, #fade", function () ( // deraza tashqarisidagi bosish bilan yopish, ya'ni. fonda ...$ ("# xira,. popup_block"). fadeOut (function () ($ ("# fade, a.close"). remove (); // yo'qolmoq, so'limoq)); noto'g'ri qaytarish; )); ));

$ (hujjat) .ready (function () (// poplight klassi va teg atributining href havolasi bosilganda c # $ ("a.poplight"). bosing (function () (var popID = $ (this) .attr ("rel"); // deraza nomini oling, o'zgarishni unutmaslik kerak) yangilarini qo'shganda havolaning rel atributidagi ism var popURL = $ (this) .attr ("href"); // havolaning href atributidan // hajmini olish va href url var so'rovidan o'zgaruvchilarni = popURL.split ("?"); var dim = query.split ("&"); var popWidth = dim.split ("="); // so'rovlar satrining birinchi qiymati // Yopish tugmachasini qo'shish $ ("#" + popID) .fadeIn (). css (("width": Number (popWidth))). Prepend (""); // Markazni hizalamoq uchun chegarani (chegarani) aniqlang (vertikal va gorizontal) - biz balandlik / kenglikka 80 qo'shamiz + to'ldirish + chegara kengligi css da belgilangan var popMargTop = ($ ("#" + popID) .height () + 80) / 2; var popMargLeft = ($ ("#" + popID) ) .width () + 80) / 2; // Chiziq qiymatini belgilang $ ("#" + popID) .css (("margin -top": -popMargTop, "margin -left": -popMargLeft)); / / Yarim shaffof soyabon fonini qo'shing $ ("body"). Append ("

"); // div konteyner tegdan oldin yoziladi

... $ ("# fade"). css (("filter": "alpha (shaffoflik = 80)")). fadeIn (); // qatlam shaffofligi, zerikarli IE qaytarilishi uchun filtr noto'g'ri; )); // Derazani yoping va fonni xira qil ($). "#fade, .popup_block"). fadeOut (function () ($ ("# fade, a.close"). remove (); // fade out)); false return;)); ));

Xulosa:

Umuman olganda, agar siz o'rmonga kirmasangiz va o'zingizga keraksiz kodni yuklamasangiz, bizning ajoyib modal oynamiz ishlashga tayyor va sizning fikrlaringizni matnga yoki boshqa foydali ma'lumotlarga tarjima qilishni kutadi.
Modali oynadan video yoki katta hajmli tasvirlarni joylashtirmoqchi bo'lganlar uchun men shunga o'xshash maxsus plaginlardan foydalanishni maslahat berdim, chunki modal oynaning yuqoridagi misoli engil va unchalik og'ir bo'lmagan ma'lumot uchun mo'ljallangan, garchi xohlasangiz, bu muammo emas. ...

Keyingi safar men sizga misol bilan ko'rsataman va ko'rsataman, va ko'pchilik qalqib chiquvchi oynada boshqa uchinchi tomon ob'ektlari haqida bilishga qiziqishadi. Shunday qilib, Internetda adashmang va bizni kuzatib boring!

Yangilash: Dm-modal.js v1.3 versiyasi (15.01.2017)
Ruxsat etilgan: Href * = \\ # sintaksisi yordamida eskirgan .live () funksiyasi almashtirildi. Plagin endi jQuery kutubxonasining so'nggi versiyalari bilan ishlaydi

Hammasi shu! Umid qilamanki, sizda yana bir foydali darslik bor.

Hurmat bilan, Endryu

Modallar zamonaviy veb -dizaynning ajralmas qismi bo'lib, ularning yordami bilan ishlab chiquvchi bir sahifada loop qilish va tashrif buyuruvchini ikkinchi darajali sahifalarga tashlamaslik usuliga murojaat qilishi mumkin. Ushbu qo'llanmada biz jQuery va CSS3 yordamida veb -saytingiz uchun qanday qilib loyqa fon rejimlarini yaratishni ko'rib chiqamiz. Ushbu qoidalar tufayli biz deraza paydo bo'lganda loyqa fon yaratamiz, bu tashrif buyuruvchining nigohini faqat saytdagi kerakli ma'lumotga bog'laydi.

CSS3 loyqa fon rejimlari

Eng yaxshi iqtisodiy yangiliklar faqat shu erda: Drobaxa

Oynaning animatsiyasi shunday o'rnatiladiki, siz tashqi ko'rinish tugmachasini bosganingizda, oyna yuqoridan pastgacha jonlantiradi, fonni xiralashishi esa avtomatik ravishda yaxshilanadi.

1 -qadam. HTML

Bizda konteyner bo'ladi, unda quyidagilar bo'ladi: sarlavha, tavsif, keyin biz sinfli tugma uchun sinf qo'shamiz toggleModal modali oynani ochish uchun:

Sarlavha

Tavsif

Ochiq maqola